html - 最后 2 个元素的悬停背景颜色不变

Question

我正在尝试更改处于悬停状态的锚元素的背景颜色，问题是我无法使用下面的样式来实现这一点。

jsfiddle

http://jsfiddle.net/fwP6g/

css

    .dropdown ul{
        margin:0; padding:0; float:left; width:100%; 
    }

    .dropdown ul li{
        list-style:none; float:left; width:100%;
    }

    .dropdown ul li a{
        float:left; width: 265px;  height:20px; padding:5px; 
        padding-top:10px; color:#000;  font-size:12px;  
        border-bottom:1px dotted #666;  background-color:#FFF;
    }

    .dropdown ul li a:hover{
        background-color:#F80101;  !important
    }

    .dropdown ul li:last-child a{
        border-bottom:none;
    }

    .dropdown ul li a#pink{
        background-color:#FFE8E8;
    }

html

<div class="dropdown"> 
     <ul>
            <li><a href="/orders">Orders</a></li>
            <li><a href="/favourites">Favourites</a></li>
            <li><a href="/account" style="background-color:#FFE8E8;">Account</a></li>
            <li><a href="/settings" style="background-color:#FFE8E8;">Settings</a></li>
     </ul>
</div>

我很困惑，我不知道为什么这不起作用，任何帮助将不胜感激。

Answer 1

需要在!important收盘前去;。

.dropdown ul li a:hover {
    background-color:#F80101 !important; 
}

jsFiddle 示例

Answer 2

具有相同 id 的两个元素在语义上是不正确的。此外，为您的选择器使用 ids 为规则提供了非常高的优先级，这就是您需要使用!important.

我建议给最后 2 个列表项链接一个粉红色的类而不是一个 id。

然后你只需要在.pink规则之前声明:hover规则。由于两个规则具有相同的优先级，并且:hover规则在后，它将覆盖该.pink规则。

http://jsfiddle.net/fwP6g/2/

HTML

...
<li><a href="/account" class='pink'>Account</a></li>
<li><a href="/settings" class="pink">Settings</a></li>
...

CSS

.dropdown ul li a.pink{
    background-color:#FFE8E8;
}
.dropdown ul li a:hover{
    background-color:#F80101;
}

Answer 3

Change your id="pink" to class="pink", than in your css add this to your hover .dropdown ul li a.pink:hover

Answer 4

添加这个：

错误的：

.dropdown ul li a:hover{
        background-color:#F80101;  !important
    }

真的：

.dropdown ul li a:hover{
        background-color:#F80101 !important;  
    }