スタイルシートのa:hoverに関する質問です。


htmlファイル内にて、

a:hover {background-color:#cc0000;}
img {margin:10px;}

と指定しているます。

このとき、画像にアンカーリンクを張っていると、Firefox2.0で画像にマウスポインタを合わせたときに、
margin-bottomの10pxの部分がa:hoverで指定した色に変わってしまいます。
(IE6.0の場合は色は変わりません。)

テキストリンクのみa:hoverを対応させるようにして、画像リンクの場合はすべてa:hoverの設定を回避するようにしたいのですが、どのように記述すれば回避できますでしょうか?

a:hover img {background-color:#ffffff;}

などと指定してもできませんでした。
imgタグにclass属性を加えることなく、回避する方法がありましたらぜひ教えてください。
どうぞよろしくお願いいたします。

回答の条件
  • 1人2回まで
  • 登録:2007/09/20 12:13:51
  • 終了:2007/09/25 13:05:47

ベストアンサー

id:wen000 No.3

wen000回答回数134ベストアンサー獲得回数82007/09/20 14:12:32

ポイント50pt

img {

padding:10px;

background:#fff;

margin:0;

_margin:10px;

}

ではいかがでしょうか。

id:pitagora

どうもありがとうございます。

IEでもFirefoxでも望み通りの表示をすることができました!

_margin とうい記述方法があるのですね~!

IEだけに読み込ませる方法なのでしょうか・・・。

昨日1日中悩んでいたことが解決しました。

本当にありがとうございました(^^)

2007/09/20 14:32:35

その他の回答(3件)

id:retla No.1

retla回答回数16ベストアンサー獲得回数12007/09/20 12:32:23

ポイント25pt
img {margin:10px;}

img {padding:10px; background-color:#ffffff;}

にしてみてはどうですか。

margin部分は「a要素の中でありimg要素の外」ということになるので、imgへの指定では多分回避できません。

id:pitagora

どうもありがとうございます。

paddingで指定すると、この問題は回避できました。

けれど、今度はIEで表示したときにimgに対するpaddingの指定が反映されないのです。

なので、今度はレイアウトが崩れてしまうのですよね~。

IEで表示したときに、imgタグに対するpaddingが有効にならないのは他の要素もからんでくるのでしょうね・・・。

2007/09/20 13:00:33
id:wizemperor No.2

wizemperor回答回数379ベストアンサー獲得回数522007/09/20 12:32:49

ポイント25pt

marginの代わりにpaddingを使って、

img {
padding: 10px;
background: #ffffff;
}

としたらどうでしょう?

id:pitagora

どうもありがとうございます。

上記のコメントの通り、新しい問題が発生してしまうので、それを回避できるように頭を使ってみます!

2007/09/20 13:00:41
id:wen000 No.3

wen000回答回数134ベストアンサー獲得回数82007/09/20 14:12:32ここでベストアンサー

ポイント50pt

img {

padding:10px;

background:#fff;

margin:0;

_margin:10px;

}

ではいかがでしょうか。

id:pitagora

どうもありがとうございます。

IEでもFirefoxでも望み通りの表示をすることができました!

_margin とうい記述方法があるのですね~!

IEだけに読み込ませる方法なのでしょうか・・・。

昨日1日中悩んでいたことが解決しました。

本当にありがとうございました(^^)

2007/09/20 14:32:35
id:tezcello No.4

tezcello回答回数459ベストアンサー獲得回数692007/09/20 14:34:00

ポイント25pt

コメントがつけられないので、こちらへ。

つい最近、似たような質問がありました。

http://q.hatena.ne.jp/1189597197

こちらの質問者さんは、ボックスサイズを指定する事で回避したようですが。


で、同じ回答になってしまいますが、

img { border-style: none; background-color: Window;}

これではどうでしょう。

上記では背景の色をウィンドウと同じとしましたが、色の指定は色々出来るようです。

http://www.tohoho-web.com/wwwcolor.htm#ColorUserDefine

状況によっては、別の色指定(あるいはその親要素が指定しているのと同じ色)が必要かも知れません。


IE(互換モード)はボックスサイズの計算が規格に合っていないので、padding を使うと他のブラウザと表示が異なります。

標準モードとなる様にチャンと宣言するか、使わないのがよいでしょう。

id:pitagora

どうもありがとうございます。

同じような質問を教えていただいてありがとうございます。

いろいろな指定方法があるのですね~!

改めて勉強してみます(^^)

2007/09/20 14:41:06
  • id:wen000
    行頭に_をつけるとIEでだけ読み込めるようになります
    http://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack.htm
    ただあくまでウラワザなのであまり使いまくるのはやめたほうがいいかもです…
  • id:pitagora
    こういった裏技があるのですね~。
    とても勉強になりました。本当にどうもありがとうございました。

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

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

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

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