html - 如何排除活动 LI（菜单）的悬停？

Question

我在 CSS 中创建了一个导航菜单。如果一个项目（LI）是active如何防止它可以悬停的？

下面的CSS：

.page-header .menu li {
    float:left;
    display: inline;
    margin-right: 2px;
    line-height: 34px;
} 

.page-header .menu li a.active {
    background-color: white;
    font-weight: bold;
    color:black;
}

.page-header .menu li a:hover {
    background-color: red;
}

HTML：

    <ul class="menu">
        <li><a class="active" href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
    </ul> 

-

class="active"应该禁止悬停。

Answer 1

出来选择它：

.page-header .menu li a.active,
.page-header .menu li a.active:hover {
    background-color: white;
    font-weight: bold;
    color:black;
}

http://jsfiddle.net/userdude/RSwnP/

请注意，我添加了a.active:hover，但也请注意选择器特异性在这里覆盖了它。请参阅this fiddle以获取示例（您可能想使用也可能不想使用），其中我使一个比另一个“不太具体”；我已经li从:hover选择器中删除了。