2

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

 <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 中移动到悬停的项目，可能会更好。

4

4 回答 4

3

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

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/

于 2013-11-05T21:55:16.930 回答
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 示例- 这似乎是您想要的 -10px出于可见性目的而添加。

于 2013-11-05T21:53:42.937 回答
1

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

于 2013-11-05T21:53:32.153 回答
0

这是一个对我有用的实际修复：

→ 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 将是一个更容易（不是唯一）可以解决此问题的解决方案。

于 2013-11-05T22:00:13.523 回答