CSS 鼠标悬停时改变另一个元素

Question

我有一个CSS问题。我想在悬停在另一个元素上时更改元素。它可以工作，但不完美。我的代码：

<ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS：

.navbar-inverse .navbar-nav > .active > a {
    color:#fff;
}

.navbar-inverse .navbar-nav > li > a:hover {
    color:#fff;
}

.navbar-inverse .navbar-nav > li:not(.active):hover ~ .active > a {
    color:#D4D4D4;
}

就像我说的一样，它可以工作，但是当 .active 在被悬停元素之前时，它就不能起作用。例如：当“联系人”是 .active 时，它可以工作，但是当主页是 .active 时，它就不能工作。如何让它起作用呢？

- delco

---

简单来说：你做不到。CSS通用兄弟选择器只适用于“下游”兄弟，无法逆流查找先前的兄弟或向上遍历父节点。你的规则li:not(.active) > a:hover ~ .active只会查找具有活动类的悬停锚元素的同级元素，并且无法查找具有活动类的父级元素的同级元素。 - Terry

a:hover ~ .active 无法工作，因为活动元素和链接不是兄弟节点。 - Fabrizio Calderan

是的，使用 JavaScript。 - Topr

我会检查我的答案，你也许可以避免使用JS @delco :) - SidOfc

保持简单，退一步，重新考虑你的CSS。你不需要使用~运算符。请参考我的回答。 - Jose Rui Santos

Answer 1

这里有一个仅基于CSS的解决方案。

.navbar-inverse {
    background-color: black;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > li > a:hover {
    color:#fff;
}

.navbar-inverse .navbar-nav:hover > li.active > a {
    color:#D4D4D4;
}

<div class="navbar-inverse">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="active"><a href="#">Portfolio</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

- Jose Rui Santos

Answer 2

如所述，使用该技术是不可能实现的，但有其他参考资料可以帮助你找到一个不同的替代方案，也许这个方案会更加可行。

CSS Tricks的这篇文章解释了我的意思。

这种方法非常巧妙，它利用元素之间的父子关系，而不是在鼠标悬停在子元素上时触发效果，当鼠标悬停在父元素上时，才会触发效果，然后你只需要为你正在悬停的子元素取消效果即可。

这将导致除你正在悬停的元素以外的所有元素都具有效果，你应该为正在悬停的元素设置样式。

这里是一个简单的CSS示例：

ul.my-nav:hover li { //target LI's in a list
    background: #09c; //changes all li's to blue bg when hovering over nav
}

ul.my-nav:hover li:hover { //target LI within nav, more specific selector is key.
    background: #d22; //changes hovered li to red bg

}

这是基本概念，但你需要确保菜单没有任何“多余”空间，因为那会在实际悬停于项目之前触发效果，但话说回来，那几乎是唯一的缺点。

- SidOfc

Answer 3

正如评论所说，你无法使用CSS来实现这个功能。好消息是，使用Jquery很容易实现！这是你想要的吗？- https://jsfiddle.net/ron7p3s5/

$(document).ready(function(){
    $(".active").hover(function(){
        $('li').css("background-color", "#D4D4D4");
    });
});

- c.early

---

老实说，我不建议仅仅为了这个目的而使用jQuery，在这种情况下，原生JS会更好，38kb对比1.5kb (^。^)，尽管大多数情况下jQuery都会被缓存，所以实际上并没有那么重要。 - SidOfc

Answer 4

没有必要把这个简单的事情搞得更复杂。 只需应用这个CSS，它就能正常工作。

.navbar-inverse .navbar-nav > a {
   color: #9d9d9d;
}    
.navbar-inverse .navbar-nav > .active > a {
   color: #D4D4D4;
}
.navbar-inverse .navbar-nav > li > a:hover {
   color: #fff;
}

- Antony SUTHAKAR J