JavaScriptでマウスオーバーを実現する方法

2011/06/19 22:01

このQ&Aのポイント

マウスオーバーをJavaScriptで実現する方法を解説します。Google Chromeでは動作する方法ですが、IE6では動作しません。
要素のマウスオーバー時に文字色や背景色、画像を変更する方法をJavaScriptで実現します。
JavaScriptのmouseOverイベントとCSSの:hover疑似クラスを組み合わせることで、マウスオーバー時にスタイルを変更することができます。

マウスオーバーをjavascriptで実現する方法

添付画像のようにマウスオーバーすることで、文字色や背景色や画像(文字の後ろの■がダミー画像となります)を変更したいと思いました。下記のソースでGoogle Chromeでは動作したのですが、IE6では動作しませんでした。 afterを使用しているのが原因と思い、こういう場合はjavascriptを使用して実現するのかなと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。なお、ここに出てくる名前(ライフなど)は何文字になろうが、そのすぐ後ろに画像を表示させたいと思っています。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css">  </style> </head> <body> <ul class="category"> <li><a href="http://oshiete.goo.ne.jp/category/214/">ライフ</a></li> <li><a href="http://oshiete.goo.ne.jp/category/207/">デジタルライフ</a></li> <li><a href="http://oshiete.goo.ne.jp/category/212/">趣味</a></li> </ul> </body> </html> 以上、宜しくお願いします。

iroha_168
お礼率89% (204/228)

JavaScript
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2011/06/20 10:41 回答No.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>

質問者

お礼 2011/06/25 13:31

ご回答ありがとうございます。ご教示いただいたソースで意図した動作となりました。 <!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">  </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> このたびはどうもありがとうございました。以上、よろしくお願いします。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

PXU10652
ベストアンサー率38% (777/1993)

2011/06/19 23:10 回答No.2

「マウスオーバーをjavascriptで実現する方法」　onMouseOverとonMouseOutでマウスがその上にあるときとないときで、画像を入れ替えるようなJavaScriptを組んでやれば実現できます。↓ http://javascript.eweb-design.com/0811_mci.html http://javascript.eweb-design.com/0803_mci.html 　私のホームページでもやっています。