选择带边框悬停的主持

我有一个简单的导航列表。典型设置，其中活动页面li项目具有“活动”标识。我希望能够保持活动页面为链接，在下面有一个实心的边框，但在没有“活动”ID的情况下在li项目上有一个虚线边框。选择带边框悬停的主持

如何在没有使用虚线border-bottom覆盖活动标签的情况下实现此目的？

下面是列表中的代码：

<div id="nav_bar"> 
    <ul id="nav_list"> 
    <li id="active"><a href="#">About</a></li> 
    <li><a href="#">Design</a></li> 
    <li><a href="#">Photography</a></li> 
    </ul> 
</div>

jsFiddle Example

来源

2013-07-05 Brant Barton

你能告诉我们你到目前为止没有工作吗？ –

你也可以提供CSS吗？更好的是，一个[jsfiddle]（http://jsfiddle.net）的例子？ – Dom

这是我正在尝试，没有工作http://jsfiddle.net/FaESR/ –

由于边界已经被应用到每个a，使:hover仅适用于li不在#active使用:not()。

变化：

#nav_list li a:hover{ 
    border-bottom:1px dashed #666; 
} 

#active a{ 
    border-bottom:1px solid #666; 
} 

#nav_list li#active a:hover{ 
    border-bottom:1px dashed #666; 
}

要：

li#active a{ 
    border-bottom:1px solid #666; 
} 

#nav_list > li:not(#active) a:hover{ 
    border-bottom:1px dashed #666; 
}

DEMO： http://jsfiddle.net/FaESR/1/

注：请确保使用class，而不是id如果你打算在具有超过一个实例#active，因为id必须是唯一的！

快乐编码！

来源

2013-07-05 17:22:11 Dom

谢谢！我想知道是否有某种排除标签的方法 –

选择带边框悬停的主持

回答

相关问题