- ベストアンサー
JavaScriptでマウスオーバーを実現する方法
- マウスオーバーをJavaScriptで実現する方法を解説します。Google Chromeでは動作する方法ですが、IE6では動作しません。
- 要素のマウスオーバー時に文字色や背景色、画像を変更する方法をJavaScriptで実現します。
- JavaScriptのmouseOverイベントとCSSの:hover疑似クラスを組み合わせることで、マウスオーバー時にスタイルを変更することができます。
- iroha_168
- お礼率89% (204/228)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
CSSが切れていると冗長な表示になるためあまりお勧めはしませんが、 こんな感じでCSSで処理することはできます。 <style> .off{ display:none; } a:hover{ background-color:gray; color:red; } a:hover .on{ display:none; } a:hover .off{ display:inline; } </style> <ul> <li><a href="#">test1<img src="1.jpg" class="on"><img src="2.jpg" class="off"></a></li> <li><a href="#">test2<img src="1.jpg" class="on"><img src="2.jpg" class="off"></a></li> <li><a href="#">test3<img src="1.jpg" class="on"><img src="2.jpg" class="off"></a></li> </ul>
その他の回答 (2)
- PXU10652
- ベストアンサー率38% (777/1993)
「マウスオーバーをjavascriptで実現する方法」 onMouseOverとonMouseOutでマウスがその上にあるときとないときで、画像を入れ替えるようなJavaScriptを組んでやれば実現できます。↓ http://javascript.eweb-design.com/0811_mci.html http://javascript.eweb-design.com/0803_mci.html 私のホームページでもやっています。
- 参考URL：
- http://www.me-hp.com/
お礼
ご回答ありがとうございます。 今回はyambejpさんの方法で意図した動作になったため、そちらを採用させていただきますが、ご提示方法は今後参考にさせていただきたいと思います。 このたびはどうもありがとうございました。 以上、よろしくお願いします。
- reggaepunc
- ベストアンサー率59% (64/108)
:afterはie6はサポートしてないはず。 CSSでやるなら:hoverを使って、 背景画像の位置を変えることで動きをつけますね。多分。
お礼
ご回答ありがとうございます。 今回はyambejpさんの方法で意図した動作になったため、そちらを採用させていただきますが、ご提示方法は今後参考にさせていただきたいと思います。 このたびはどうもありがとうございました。 以上、よろしくお願いします。
お礼
ご回答ありがとうございます。 ご教示いただいたソースで意図した動作となりました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>title</title> <style type="text/css"> <!-- img { border:none; } .off{ display:none; } a:hover{ background-color:gray; color:red; } a:hover .on{ display:none; } a:hover .off{ display:inline; } --> </style> </head> <body> <ul> <li><a href="#">test1<img src="1.gif" class="on"><img src="2.gif" class="off"></a></li> <li><a href="#">test2<img src="1.gif" class="on"><img src="2.gif" class="off"></a></li> <li><a href="#">test3<img src="1.gif" class="on"><img src="2.gif" class="off"></a></li> </ul> </body> </html> このたびはどうもありがとうございました。 以上、よろしくお願いします。