css - 通过边框悬停选择总统

Question

我有一个简单的导航列表。典型设置，其中活动页面 li 项的 ID 为“活动”。我希望能够将活动页面保留为链接，下面有一个实心边框，但在没有“活动”ID 的 li 项目上有一个虚线边框。

如何在不使用虚线边框覆盖活动标签的情况下实现这一点？

这是列表的代码：

<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 示例

Answer 1

由于边框已经被应用到每一个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;
}

演示：http: //jsfiddle.net/FaESR/1/

注意：如果您计划拥有多个 的实例，请确保使用class而不是，因为必须是唯一的！id#activeid

快乐编码！