a:hover {

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

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

回答の条件
  • 1人2回まで
  • 登録:2008/08/19 15:12:58
  • 終了:2008/08/26 15:15:03

回答(2件)

id:Nori327 No.1

Nori327回答回数65ベストアンサー獲得回数32008/08/19 15:36:39

ポイント35pt

a:hover {

background-color:#07913B;

text-decoration:none;

color: #FFFFFF;

}

a:hover img {

background-color:#ffffff

}

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

IE7とFireFox3で確認しました。

id:righton

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

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

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

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

どうやるんでしょうか?

2008/08/19 18:45:21
id:Numeric No.2

Numeric回答回数83ベストアンサー獲得回数182008/08/20 15:27:21

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

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

id:righton

ありがとうございます!

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

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

2008/08/20 15:32:55
  • id:Marine-Blue
    流れを見ながら、img要素を囲ったa要素にclass属性を付与して其処だけ背景色を透明にするのはなしかなぁと思ったけど、a要素で囲った範囲にテキストと画像両方あった場合を考えるとNumericさんのやり方のほうが良いかも、と思いました…。
  • id:righton
    >Marine-Blue さん

    >>img要素を囲ったa要素にclass属性を付与して
    >>其処だけ背景色を透明にするのはなしかなぁと思ったけど、

    って、多分、このやり方で大丈夫だと思います!
    (実際、オンマウス時に背景色が緑になってしまう画像が、2箇所だけなんです)

    悲しいかな、

    a:hover img {

    background-color:none;

    }

    のような、間違った書き方しか知らないのです。。

    >>img要素を囲ったa要素にclass属性を付与して
    >>其処だけ背景色を透明にするのはなしかなぁと思ったけど、

    は、どうやって実現されるのでしょうか?
  • id:Numeric
    シンプルで良い方法ですね。
    思いつきませんでした。


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

    a.anchorimg:hover {
    background-color: transparent;
    }


    <a href="#">link</a><br>
    <a href="#" class="anchorimg"><img alt="image" src="anchor_image.gif" height="30" width="30" border="0"></a>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません