Question

前一段时间：在css中悬停很顺利，但是我做了一些更改（我忘记了）现在它无法正常工作

.nav-bar {
  width: 30px;
  height: 20px;
  display: inline-block;
  position: absolute;
  right: 5px;
  top: 0;
  bottom: 0;
  margin: auto;
  cursor: pointer;
}

.nav-bar:hover {
  color: #B0BEC5;
}

.nav-bar span {
  width: 30px;
  height: 3px;
  background: white;
  display: block;
  margin-bottom: 5px;
  position: absolute;
  transition: 0.25s ease-in-out;
  border-radius: 3px;
}

<div class="nav-bar">
  <span></span>
  <span></span>
  <span></span>
</div>

Answer 1

我想你想在悬停时更改栏的背景颜色

替换这个：

.nav-bar:hover {
   color: #B0BEC5;
}

用这个：

.nav-bar:hover span{
    background: #B0BEC5;
}

Answer 2

代码中只有2个小错误，更改：

.nav-bar:hover {
  color: #B0BEC5;
}

要

.nav-bar:hover > span {
    background-color: #B0BEC5;
}

然后它应该完美地运作。

Answer 3

您需要将鼠标悬停在导航栏中，但需要在范围内：

.nav-bar {
}

.nav-bar span {
  background: white;
  color: red;
  padding: 2px 8px;
  margin: 2px;
  transition: 0.25s ease-in-out;
  border-radius: 3px;
  display: inline-block;
}

.nav-bar span:hover{
  background: red;
  color: white;
}

<div class="nav-bar">
  <span>NavA</span>
  <span>NavB</span>
  <span>NavC</span>
</div>

Answer 4

您的代码非常完美。只需改变悬停效果。

.nav-bar:hover {
   background: #B0BEC5;
}

你添加了css color : #B0BEC5，它改变了文本的颜色，而没有文字。

css：无论如何都悬停不起作用

4 个答案: