如何关闭<li>的鼠标悬停?

时间:2016-02-01 21:33:27

标签: html css hover

我试图在导航菜单中关闭当前页面的悬停。

&#13;
&#13;
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;
&#13;
<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;
&#13;
&#13;

这是jsfiddle: https://jsfiddle.net/swordams/jk6z5aqj/

我希望家中的li保持黑暗,不要在悬停时改变。我已经尝试将悬停背景颜色设置为&#34;继承&#34;,但这不起作用。

谢谢!

3 个答案:

答案 0 :(得分:2)

您可以使用CSS :not()伪类:

.nav li:hover:not(.current) {
    background-color: #737373;
}

<强> jsFiddle example

答案 1 :(得分:0)

您可以使用j08691的解决方案,但最终,您的css问题是.nav li:hoverli.current:hover更具体。处理.nav就可以了。

.nav li.current:hover {
  background-color: inherit;
}

答案 2 :(得分:0)

只需使主动/当前li背景颜色重要

li.current {
    background-color: #424242 !important;
}