高级 CSS 导航悬停

Question

请参阅此处了解我的问题：http://jsfiddle.net/FvBqA/126/

我的问题是，我希望能够将鼠标悬停在锚点和 li 上，如果这有意义的话，可以实现一个悬停状态。

目前，如果您将鼠标悬

停在蓝色部分上，则蓝色仅可见（这是 li），如果您将鼠标悬停在锚点上，则会出现 li 和锚点悬停 - 请注意，这是正确的，但是，我只希望在用户将鼠标悬停在锚点上时出现这种悬停状态。

如果用户将鼠标悬停在列表项上，则不应显示任何内容。

.HTML

<ul id="nav">
    <li>
        <a href="#">Home</a>
    </li>  
    <li>
        <a href="#">Services</a>
    </li>  
    <li>
        <a href="#">Contact</a>
    </li>        
</ul>

.CSS

#nav li {
    float: left;
    padding: 0 0 0 13px;
}
#nav li a {
    display: block;
    height: 51px;
    text-align: center;
    color: #494949;
    font-size: 13px;
    padding: 35px 15px 0;
    border: 1px solid transparent;
    text-decoration: none;                
}
    #nav li:hover {
        background: blue;    
}
#nav li:hover a {
    background: red;
    border: 1px solid #2596c0;
    color: #fff;
}

Answer 1

在将

鼠标悬停在li上时需要蓝色和红色（无论是否也悬停在a上），则只需在li上指定:hover伪类，并使用后代选择器来定位a元素：

#nav li:hover a {
    background: red;
    border: 1px solid #2596c0;
    color: #fff;
}

JS小提琴演示。