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;
}
No.1
16
0
20pt
URLはダミーです
a:xxxx の記述が間違ってますよぉ
誤：
a:hover img.setubiphoto {
正：
img.setubiphoto a:hover {
No.2
160
20pt
ごめんなさい、さっきのまちがいでした。
正しいのはこちらです。
td.setubiphotoarea a:hover {
クラスはAタグの外に書くので・・。
クラスsetubiphotoarea のなかの a:hoverの指定という意味です。
No.3
746
40pt
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----
なるほど、相すればいいんですね。
コーディングもミスしてたんですが、大変勉強になります。試してみたところうまくいきました。
本当にありがとうございます。
sd9to
2004/12/23 07:37:07
44
44
4
2
2
ありがとうございます。
たいへん助かりました。CSS初心者なもんで。