Question

我的CSS有问题。当我将鼠标悬停在另一个元素上时，我想要更改元素。它工作但不完美。我的代码： HTML

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

正如我所说，它有效，但如果在{hoo}之前，.active则不起作用。示例：当“联系人”为.active时，它会起作用，但当主页为.active时，它不起作用。如何使它工作？

Answer 1

这是一个仅限CSS的解决方案。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

如上所述，使用该技术的CSS 是不可能的，但是还有其他参考可以帮助您找到可能可接受的其他替代解决方案。

关于CSS技巧的
This post解释了我的意思。

它非常聪明，因为它使用了父母＆gt;元素之间的子关系，而不是在将鼠标悬停在父上时触发它时触发效果而不是触发效果，然后否定仅针对您的孩子的效果徘徊。

这样做的结果是所有元素都会产生效果，除了你应该设置样式的那个。

一个简单的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 }

这是这里的基本概念，但是您必须确保您的菜单没有任何“多余”空间，因为这会在您将鼠标悬停在实际项目之前触发效果，但是说，这几乎是唯一的缺点。

Answer 3

正如评论所说，你不能用CSS做到这一点。好消息是用Jquery做起来很简单！这是你想要的吗？ - https://jsfiddle.net/ron7p3s5/

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

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

CSS On悬停更改另一个元素

4 个答案: