background-color:#07913B;
text-decoration:none;
color: #FFFFFF;
}
という記述をCSSですることで、リンクされた文字をオンマウスすると、緑地に白文字になるようにしています。
Firefoxだと大丈夫なのですが、IEの場合、背景が透明のgif画像も、同じように背景が緑になってしまいます。
これを、画像だけはオンマウスしても背景色が変わらない（つまり、透明のまま）にしたいのですが、
どのようにCSSに記述すれば良いのでしょうか？
No.1
65
3
35pt
a:hover {
background-color:#07913B;
text-decoration:none;
color: #FFFFFF;
}
a:hover img {
background-color:#ffffff
}
透明のまま、というわけではありませんが、#ffffffの部分を背景色と同じにすれば大丈夫ではないでしょうか。
IE7とFireFox3で確認しました。
No.2
8318
35pt
a:hover { background-color:#07913B; text-decoration:none; color: #FFFFFF; } a:hover img { background-color: transparent; }
こう書けばimgタグの背景色は透明になりますが、画像の背景色は緑色になってしまいます。
なぜなら、このとき表示されている緑色は画像の背景色ではなく、親要素であるaタグの背景色だからです。
これを回避するすばらしい方法は思いつきませんでしたが、以下のように記述すればなんとか実現できます。
<html> <head> <title>Untitled</title> <style> body{ background-image: url('background_image.gif'); } a:hover { background-color: transparent; text-decoration:none; color: #FFFFFF; } a:hover span{ background-color: #07913B; } </style> </head> <body> <p> <a href="#"><span>link</span></a><br> an image <a href="#"><img alt="image" src="anchor_image.gif" height="30" width="30" border="0"><span>and a link</span></a> </p> </body> </html>
表示自体は問題ないのですが、リンクされた文字すべてにspanタグを記述しなければいけないので
あんまり現実的ではないかもしれません…
ありがとうございます！
背景が透明な画像を使って、それを重ねる、っていうのが意外と難しい、ってことですね。
やっぱり背景に同じものを敷くかな。。。
Marine-Blue
2008/08/20 22:59:39
41
41
Numeric
1
1
すみません、言い忘れました。
body全体に背景画像を敷いているので、背景色が白だとダメなんです。
つまり、a:hover imgが透明のままにしたいのです！
多分、この画像だけ除外する、とかやると思うのですが、
どうやるんでしょうか？