我试图在导航菜单中关闭当前页面的悬停。
div.nav {
width: 100%;
padding: 6px;
height: 40px;
}
.nav li {
color: #FFFFFF;
display: inline;
list-style-type: none;
text-align: center;
text-transform: uppercase;
padding: 20px;
margin: 0px;
height: 40px;
}
li.current {
background-color: #424242
}
li.current:hover {
background-color: inherit;
}
.nav li:hover {
background-color: #737373;

<div class="nav">
<ul>
<li class="current">Home</li>
<li><a href="null">About</a>
</li>
<li><a href="null">Contact</a>
</li>
<li><a href="null">Gallery</a>
</li>
</ul>
</div>
&#13;
这是jsfiddle: https://jsfiddle.net/swordams/jk6z5aqj/
我希望家中的li
保持黑暗,不要在悬停时改变。我已经尝试将悬停背景颜色设置为&#34;继承&#34;,但这不起作用。
谢谢!
答案 0 :(得分:2)
您可以使用CSS :not()伪类:
.nav li:hover:not(.current) {
background-color: #737373;
}
<强> jsFiddle example 强>
答案 1 :(得分:0)
您可以使用j08691的解决方案,但最终,您的css问题是.nav li:hover
比li.current:hover
更具体。处理.nav
就可以了。
.nav li.current:hover {
background-color: inherit;
}
答案 2 :(得分:0)
只需使主动/当前li背景颜色重要
li.current {
background-color: #424242 !important;
}