Question

在导航菜单中，我有一个适用于所选部分的底部边框和悬停操作..

 <nav>
 <ul>
 <li><a href="#" id="selected">Home</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="#">Contact</a></li>
 <li><a href="#">About</a></li>
 </ul>
 </nav>

css：

 nav a:hover, #selected {
 border-bottom: 1px solid pink;
 }

当我将鼠标悬停在另一个列表项上时，我想要的是从#selected id中消失的边框。我试过像..

 nav a:hover ~ #selected {
 border-bottom: none;
 }

但无论我把#selected放在哪里，这都行不通。甚至用+选择器。

如果可以使底部边框在x-index中移动到悬停的项目，可能会更好..

Answer 1

~不会像<a>元素那样扩展到“ cousins ”。它仅适用于像<li> s这样的直接兄弟姐妹。

nav li:hover ~ li #selected {
    /* */
}

而且，即便如此，它只适用于随后的兄弟姐妹。因此，它可以从About找到Home，但不是相反。

尽管如此，您可能会对<nav>或<ul>正在发生的事情作出反应：

nav a:hover,
#selected,
nav:hover #selected:hover /* override next selector and rule */ {
    border-bottom: 1px solid pink;
}

nav:hover #selected {
    border-bottom: none;
}

http://jsfiddle.net/6Eh8M/

Answer 2

您定位的是a元素，它们不是兄弟姐妹，而是兄弟li元素的子元素。

除此之外，兄弟选择器~不会选择它之前的元素，只是选择它之后的元素。

因此，由于#selected是ul的第一个孩子，因此未选中它。相反，如果#selected是最后一个元素，那么它在理论上将起作用;但是，这并不能解决你的问题。

要获得所需的结果，您可以将鼠标悬停在border-bottom上时移除ul。

ul:hover #selected { border-bottom:none; } #selected, a#selected:hover, a:hover { border-bottom:10px solid pink; }

jsFiddle example - 这似乎是您想要的 - 10px为了查看目的而添加。

Answer 3

每个a都在自己的li内。因此，#selected没有与a匹配的兄弟姐妹。兄弟姐妹共享同一个直接父母。你的锚没有。

Answer 4

这是一个适合我的实际修复：

→ jsFiddle

/* #selectd has a border by default */
li #selected {
    border-bottom: 1px solid pink;
}
/* but not link (not even #selected) does have a border on hovering */
ul:hover a, ul:hover a#selected {
    border: none;
}
/* all hovered links should have a border (incl. #selected) */
ul a:hover, ul a#selected:hover {
    border-bottom: 1px solid pink;
}

不幸的是，将光标移动到ul的矩形也会触发边框移除#selected。然后使用JavaScript将是一个更容易（不是唯一的）解决方案，可以解决这个问题。

为什么〜选择器不能在这里工作？

4 个答案: