読者です 読者をやめる 読者になる 読者になる

もなかアイスの試食品

「とりあえずやってみたい」そんな気持ちが先走りすぎて挫折が多い私のメモ書きみたいなものです.

jQueryでマウスイベント

jQueryでマウスをある要素内に乗せると,新しい要素を表示させるプログラムを作ってみました.

サンプルはこちらから→サンプル

<!DOCTYPE html>
<html>
<head>
<title>表示テスト</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://blog-imgs-53.fc2.com/m/o/n/monakaice1973/jquery-1_8_1.js"></script>
<script type="text/javascript">
$(function() {
        $(&#039;div#takesi&#039;).mousemove(function(e){
            $(&#039;div#test&#039;).css({top:e.pageY + 20,
                            left:e.pageX + 20,});
            if($(&#039;div#test&#039;).attr(&#039;visibility&#039;)!==&#039;visible&#039;){
                $(&#039;div#test&#039;).css(&#039;visibility&#039;,&#039;visible&#039;);
                }
        });
        $(&#039;div#takesi&#039;).mouseout(function(e){
            $(&#039;div#test&#039;).css(&#039;visibility&#039;,&#039;hidden&#039;);
        
        });
 
});
</script>
<style>
#takesi{
    background-color:#009CB4;
    border:2px solid #000000;
    width:250px;
    height:250px
}
#test{
    position: absolute;
    background:#FF9900;
    border:2px solid #000000;
    visibility:hidden;
    width:520px;
    height:420px
}
</style>
</head>
 
<body>
    <div id="takesi">
    <br/>
    <span style="color:#FFFFFF;"><b>ここにマウスを載せる</b></span>
    </div>
    <div id="test" style="line-height: normal; font-size: 12pt; font-family: &#039;MS Pゴシック&#039;;">
                                        ___</br>
                               &par;   &par;</br>
                            | ̄ ̄ ̄ ̄ ̄ ̄ ̄|</br>
                            |   IYH&infin;    ||</br>
                            |          | |</br>
                            |  TSUKUMO   | |</br>
    _            _ ,,,,,,,,,,,,,,,,,,,     ,,|__,ヘ______|/</br>
    │ ,ヽヘ         &#039;&quot; へ⌒⌒⌒ヾヾ 、   /  __丿</br>
    \  ヽ     /&Prime; &lambda;       \ \ /  /</br>
      ヽ  ヽ   /   / |  ヽ    \ 九ヽ  V  /</br>
       ヽ  ヽ /   /  |   ヽ   \ ヽ /  /</br>
        ヽ  ヽ|   / ̄ヽ |    \ ̄ヾ | ,V  /</br>
        .ヽ  | | |, |  ヽ &or;\- ヽ  | ,/  / ⌒丶</br>
         ヽ  | | | |ヾ⌒ヽ   &chi;⌒ゞ | ,/   &Delta; ○ )</br>
          ヽ ヽ| ヽ| しソ      しソ  |/  /__/</br>
           ヽ人 (&equiv;   -     &equiv; /  /\ \</br>
          // ヽ/\ ┌---;┐    /\,人  ヽ  ヽ</br>
         / //  ,/XX/ヽ丶___ノ__/\  \\ ヽ  ヽ</br>
        / ,/, \/XX/  /X&lambda;XX /| |XX\   フ ヽ   \</br>
       / /   ,/\X,|  |&ang;_ヽ/ / |XXXXフ    ヽ   \</br>
      /  /  /  \| TSUKUMO |   |XX/      \   \</br>
     //     /   /  ̄ ̄ ̄ ̄ ヽ  |/          \    \</br>
    //|     /   /          ヽ,  |            ヽ    \</br>
   / //    /    |          ヽ |             ヽ  ヽ  \</br>
  / / |    ,/    |           ヽ|             ヽ. . .ヽ. . . .\</br>
  / / /   ,/     |            ヽー-ャ          ヽ: : :ヽ: : : : ヽ</br>
    </div>
 
</body>
</html>

id="takesi"の上にマウスが乗ると,id="test"のvisibilityがvisible,マウスが離れるとhiddenにするようにしています

$('div#test').css({top:e.pageY + 20,left:e.pageX + 20,});

↑id="test"の座標設定,絶対座標(pisition: absolute;)この2つの設定でマウスについてくるようになってます

相対座標(position: relative;)にすると,他の要素の座標に影響が出てしまい,隠した要素が再表示される度にレイアウトが変わってしまいます