高级CSS导航哈弗

在这里看到我的问题：http://jsfiddle.net/FvBqA/126/高级CSS导航哈弗

我的问题是，我希望能够悬停在锚和李，如果这是有意义的实现一个悬停状态。

目前，如果您将鼠标悬停在蓝色部分上，蓝色只会显示（这是li），如果您将鼠标悬停在锚点上，则会显示li和anchor悬停 - 请注意，这是正确的，但是我只想要悬停当用户悬停在锚上时状态。

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

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; 
}

来源

2012-06-25 Filth

你只想要*悬停时悬停状态？整个链接是蓝色的，或红色的..？并且，只是一个建议，但如果diamond-mod将您的问题编辑为*添加*代码，那么在编辑时最好最好*纠正错误的代码*但不要删除代码。真的，我们*爱*外部现场演示，但我们希望相关代码在这里*在这个问题。 –

@DavidThomas我希望两个国家悬停 – Filth

在您需要的蓝色和红色的理解悬停在li时（无论悬停在a的为好），那么只需在li上指定:hover伪类，并使用后代选择器t ARGET的a元素：

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

JS Fiddle demo。

来源

2012-06-25 22:19:28

完美 - 谢谢！ – Filth

不客气，我很高兴得到了帮助。 –

高级CSS导航哈弗

回答

相关问题