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

cssのことについて教えてください。ソース<td width=”50%” rowspan=”3” valign=”top” class=”setubiphotoarea”><a href=”#”><img src=”images/o1.jpg” width=”160” height=”100” border=”0” class=”setubiphoto” ></a></td>


CSSでa:hoverの時にボーダーの色を変えたいんですが、IE6では色が変わりません。classにfloat:leftを指定してまして、これが影響しているみたいなんですが、うまくいきません。どなたか詳しい方、回避方法を教えていただけませんか?CSSは以下のとおりです。
#table4 .setubiphoto{
padding: 0px;
display: block;
float: left;
margin: 0px 0px 30px 3px;
}
a:link img.setubiphoto{
border: 1px solid Gray !important;
}
a:visited img.setubiphoto{
border: 1px solid Gray !important;
}
a:hover img.setubiphoto{
border: 1px solid #FF8C00 !important;
}
a:active img.setubiphoto{
border: 1px solid Gray;
}

●質問者: moriamko44728
●カテゴリ:コンピュータ
✍キーワード::active :hover :link :visited border
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● sd9to
●20ポイント

http://www.goo.ne.jp/

goo

URLはダミーです

a:xxxx の記述が間違ってますよぉ

誤:

a:hover img.setubiphoto {

正:

img.setubiphoto a:hover {

◎質問者からの返答

ありがとうございます。

たいへん助かりました。CSS初心者なもんで。


2 ● sd9to
●20ポイント

http://www.goole.ne.jp/

ごめんなさい、さっきのまちがいでした。

正しいのはこちらです。

td.setubiphotoarea a:hover {

クラスはAタグの外に書くので・・。

クラスsetubiphotoarea のなかの a:hoverの指定という意味です。


3 ● 186
●40ポイント

http://186.bz/hatena/20041222/

はてな20041222_test

回避した例を置いておきます。

ソースの方に修正部が載っていますが、一応再掲ということで。

img.setubiphotoをブロック要素にして左フロートするのではなく、aをブロック要素にして左フロートすると回避できました。

IE6でこの現象が起こる理由は、ちょっと分かりません。

----以下css----

#table4 {

border: 1px solid silver;

}

#table4 img.setubiphoto{

padding: 0px;

/* display: block; */

/* float: left; */

/* margin: 0px 0px 30px 3px;*/

}

.setubiphotoarea a {

display: block;

width: 160px;

height: 100px;

margin: 0px 0px 30px 3px;

}

.setubiphotoarea a:link {border: 5px solid Gray !important;}

.setubiphotoarea a:visited {border: 5px solid Gray !important;}

.setubiphotoarea a:hover {border: 5px solid #FF8C00 !important;}

.setubiphotoarea a:active {border: 5px solid Gray;}

----以上css----

◎質問者からの返答

なるほど、相すればいいんですね。

コーディングもミスしてたんですが、大変勉強になります。試してみたところうまくいきました。

本当にありがとうございます。

関連質問


●質問をもっと探す●



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