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() { $('div#takesi').mousemove(function(e){ $('div#test').css({top:e.pageY + 20, left:e.pageX + 20,}); if($('div#test').attr('visibility')!=='visible'){ $('div#test').css('visibility','visible'); } }); $('div#takesi').mouseout(function(e){ $('div#test').css('visibility','hidden'); }); }); </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: 'MS Pゴシック';"> ___</br> ∥ ∥</br> | ̄ ̄ ̄ ̄ ̄ ̄ ̄|</br> | IYH∞ ||</br> | | |</br> | TSUKUMO | |</br> _ _ ,,,,,,,,,,,,,,,,,,, ,,|__,ヘ______|/</br> │ ,ヽヘ '" へ⌒⌒⌒ヾヾ 、 / __丿</br> \ ヽ /″ λ \ \ / /</br> ヽ ヽ / / | ヽ \ 九ヽ V /</br> ヽ ヽ / / | ヽ \ ヽ / /</br> ヽ ヽ| / ̄ヽ | \ ̄ヾ | ,V /</br> .ヽ | | |, | ヽ ∨\- ヽ | ,/ / ⌒丶</br> ヽ | | | |ヾ⌒ヽ χ⌒ゞ | ,/ Δ ○ )</br> ヽ ヽ| ヽ| しソ しソ |/ /__/</br> ヽ人 (≡ - ≡ / /\ \</br> // ヽ/\ ┌---;┐ /\,人 ヽ ヽ</br> / // ,/XX/ヽ丶___ノ__/\ \\ ヽ ヽ</br> / ,/, \/XX/ /XλXX /| |XX\ フ ヽ \</br> / / ,/\X,| |∠_ヽ/ / |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;)にすると,他の要素の座標に影響が出てしまい,隠した要素が再表示される度にレイアウトが変わってしまいます