Question

我有一个简单的导航列表。典型设置，其中活动页面li项目的ID为“活动”。我希望能够将活动页面保持为链接，下面有一个实心边框，但在没有“活动”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

Answer 1

由于边框已经应用于每个a，因此:hover仅适用于使用:not()而非li的{{1}}。

变化：

#active

要：

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

样本： http://jsfiddle.net/FaESR/1/

注意：如果您计划使用多个 li#active a{ border-bottom:1px solid #666; } #nav_list > li:not(#active) a:hover{ border-bottom:1px dashed #666; }实例，请务必使用class代替id ，因为#active 必须是唯一的！

快乐的编码！

选择边境悬停的总统

1 个答案: