※ ChatGPTを利用し、要約された質問です(原文:IE以外で:hoverの内容が無視されてしまう)
IE以外で:hoverの内容が無視されてしまう
このQ&Aのポイント
CSSの:hoverを使用して要素の背景色を変更する際、IE以外のブラウザではうまく動作しない問題が発生しています。
対象の要素に:hoverを指定しており、IE6では正常に動作していますが、operaやfirefoxでは動作しない状況です。
作成したスタイルシートを確認しても間違いは見当たらず、どこが間違っているのか分からず困っています。御指摘頂けると助かります。
独学でCSSを勉強している者です。
ちょっと躓いてしまったのでどなたかお知恵を貸してください。
下記のように指定しています。
IE6ではちゃんとhover時に背景色が変わるのですが、
opera,firefoxで動作確認したところいずれもうまく動作しませんでした。
どこが間違っているのか分からず、困っています。
御指摘頂けると助かります。
----------------
pagelist.htmlの内容
----------------
<ul class="comout">
<li class="comrow compar">ページリスト
<ul class="comin">
<li class="comrow"><a href="001.html">1</a></li>
<li class="comrow"><a href="002.html">2</a></li>
</ul>
</li>
</ul>
----------------
001.htmlの内容
----------------
<ul class="comout">
<li class="comrow compar">ページリスト
<ul class="comin">
<li class="comrow comself"><a href="001.html">1</a></li>
<li class="comrow"><a href="002.html">2</a></li>
</ul>
</li>
</ul>
----------------
スタイルシート
----------------
ul.comout{
padding:0px;
margin:0px 0px 20px 0px;
}
ul.comin{
padding:0px;
margin:0px 0px 0px 10px;
}
li.compar{
display:block !important;
padding:5px;
margin:0px;
}
li.comrow{
display:inline;
color:#395158;
list-style-type:none;
text-decoration:none;
}
li.comrow a:link{
background-color:#EFECE7;
border:1px #D1C9BD solid;
text-decoration:none;
color:#395158;
}
li.comrow a:visited{
background-color:#EFECE7;
border:1px #D1C9BD solid;
text-decoration:none;
color:#395158;
}
}li.comrow a:hover{
background-color:#D1C9BD;
border:1px #EFECE7 solid;
text-decoration:none;
color:#395158;
}
li.comself a{
background-color:#D1C9BD !important;
border:1px #EFECE7 solid !important;
}
---------------------------
以上です。
いままでIEのみで動作確認をしてきたため、
今回のような自体にどう対応して良いのか分かりません。
よろしくお願いします。
お礼
あ…… 実に基本的なミスでしたね。すみません。 IEのこのようなバグには困りますね。 ありがとうございました。