如何关闭此 <li> 的悬停？

Question

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

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>

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

我希望主屏幕的 li 保持黑暗状态并且在悬停时不发生变化。我已经尝试将悬停背景颜色设置为 "inherit"，但这不起作用。

谢谢！

Answer 1

你可以使用CSS:not()伪class:

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

jsFiddle example

Answer 2

您可以使用 j08691 的解决方案，但最终，您的 css 的问题是 .nav li:hover 比 li.current:hover 更具体。添加 .nav 即可。

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

Answer 3

只是让 active/current li 背景颜色很重要

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

如何关闭此 <li> 的悬停？

How do I turn off hover for this <li>?

html

css

hover