人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

a:hover {
background-color:#07913B;
text-decoration:none;
color: #FFFFFF;
}

という記述をCSSですることで、リンクされた文字をオンマウスすると、緑地に白文字になるようにしています。
Firefoxだと大丈夫なのですが、IEの場合、背景が透明のgif画像も、同じように背景が緑になってしまいます。
これを、画像だけはオンマウスしても背景色が変わらない(つまり、透明のまま)にしたいのですが、
どのようにCSSに記述すれば良いのでしょうか?

●質問者: righton
●カテゴリ:インターネット ウェブ制作
✍キーワード::hover background-color COLOR CSS firefox
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Nori327
●35ポイント

a:hover {

background-color:#07913B;

text-decoration:none;

color: #FFFFFF;

}

a:hover img {

background-color:#ffffff

}

透明のまま、というわけではありませんが、#ffffffの部分を背景色と同じにすれば大丈夫ではないでしょうか。

IE7とFireFox3で確認しました。

◎質問者からの返答

すみません、言い忘れました。

body全体に背景画像を敷いているので、背景色が白だとダメなんです。

つまり、a:hover imgが透明のままにしたいのです!

多分、この画像だけ除外する、とかやると思うのですが、

どうやるんでしょうか?


2 ● Numeric
●35ポイント
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タグを記述しなければいけないので

あんまり現実的ではないかもしれません…

◎質問者からの返答

ありがとうございます!

背景が透明な画像を使って、それを重ねる、っていうのが意外と難しい、ってことですね。

やっぱり背景に同じものを敷くかな。。。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ