祝Queenの日!フレディ・マーキュリーの年代別ファッション&ヒットソングまとめ

添付画像のようにマウスオーバーすることで、文字色や背景色や画像(文字の後ろの■がダミー画像となります)を変更したいと思いました。
下記のソースでGoogle Chromeでは動作したのですが、IE6では動作しませんでした。
afterを使用しているのが原因と思い、こういう場合はjavascriptを使用して実現するのかなと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。

なお、ここに出てくる名前(ライフなど)は何文字になろうが、そのすぐ後ろに画像を表示させたいと思っています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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">
<!--
ul.category li{
list-style:none;
line-heigh:2em;
margin:0.2em;
}
ul.category li a{
background-color:white;
color:blue;
}
ul.category li a:focus,
ul.category li a:hover{
background-color:gray;
color:red;
}
ul.category li a:after{
content:url(./images/arr_blue.gif);
}
ul.category li a:focus:after,
ul.category li a:hover:after{
content:url(./images/arr_red.gif);
}
-->
</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>

以上、宜しくお願いします。

「マウスオーバーをjavascriptで実」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
ご教示いただいたソースで意図した動作となりました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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>

このたびはどうもありがとうございました。
以上、よろしくお願いします。

お礼日時:2011/06/25 13:31

「マウスオーバーを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/
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
今回はyambejpさんの方法で意図した動作になったため、そちらを採用させていただきますが、ご提示方法は今後参考にさせていただきたいと思います。

このたびはどうもありがとうございました。
以上、よろしくお願いします。

お礼日時:2011/06/25 13:33

:afterはie6はサポートしてないはず。



CSSでやるなら:hoverを使って、
背景画像の位置を変えることで動きをつけますね。多分。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
今回はyambejpさんの方法で意図した動作になったため、そちらを採用させていただきますが、ご提示方法は今後参考にさせていただきたいと思います。

このたびはどうもありがとうございました。
以上、よろしくお願いします。

お礼日時:2011/06/25 13:34

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング