为什么〜选择器在这里不起作用? [英] Why is the ~ selector not working here?

问题描述

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

In the navigation menu, I have a bottom border that applies to the selected section and the hover action..

 <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消失.我尝试过类似的东西.

What I want is the border to vanish from the #selected id when I hover over another list item.. I tried something like..

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

但是，无论我将#select放在何处，这都行不通.甚至使用+选择器.

But that doesn't work, wherever I put the #selected. and even with + selector instead.

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

maybe even better if it's possible to make the bottom border move in x-index to the hovered item..

推荐答案

〜不会像< a> 元素.它仅适用于直接兄弟姐妹，例如< li> s.

~ doesn't extend to "cousins" like the <a> elements. It's only for direct siblings like the <li>s.

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

而且，即使如此，它也仅适用于随后的兄弟姐妹.因此，它可以从 Home 找到 About ，但反之亦然.

And, even then, it's only for siblings that follow. So, it can find About from Home, but not the other way around.

尽管如此，您也许可以对悬停在< nav> 或< ul> 上的内容做出反应:

Though, you may be able to react to the <nav> or <ul> being hovered over:

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/

这篇关于为什么〜选择器在这里不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！