css mouseover - 在 FF 中有效但在 IE 中无效

Question

我有以下 css，当我在 Firefox 中将鼠标悬停在它上面时可以工作，但在 IE(6) 中不能。

.PageMenu{
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: inline;
    list-style-position:outside;
}

.PageMenu li{

    display: block;
    padding: 0;
    margin: 0;
    line-height: 20px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;

}

ul#PageMenu li:hover {
   color: #000;
   background-color: #ddd; 
}

HTML 是:

<ul class="PageMenu" id="PageMenu">
    <li>       
        <a title="test" class="getPage">Click this link</a>
    </li>
    <li>
        <a title="test" href="#" class="getPage">Link text</a>
    </li>
</ul>

我正在寻找一个可以在 IE(特别是 6)和 Firefox 中工作的 css 解决方案。

Answer 1

您不能分配 :hover除了<a>之外的任何规则IE6 中的元素。尝试

ul#PageMenu a:hover {
   color: #000;
   background-color: #ddd;
}


ul#PageMenu a {
   display: block;
   width:100%;
}