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

スタイルシートの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属性を加えることなく、回避する方法がありましたらぜひ教えてください。
どうぞよろしくお願いいたします。


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

▽最新の回答へ

1 ● retla
●25ポイント
img {margin:10px;}

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

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

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

◎質問者からの返答

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

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

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

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

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


2 ● wizemperor
●25ポイント

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

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

としたらどうでしょう?

◎質問者からの返答

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

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


3 ● wen000
●50ポイント ベストアンサー

img {

padding:10px;

background:#fff;

margin:0;

_margin:10px;

}

ではいかがでしょうか。

◎質問者からの返答

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

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

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

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

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

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


4 ● tezcello
●25ポイント

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

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

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

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


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

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

これではどうでしょう。

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

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

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


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

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

◎質問者からの返答

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

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

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

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

関連質問


●質問をもっと探す●



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