css :hover 无论如何都不起作用答案

【问题标题】：css :hover not working anywaycss :hover 无论如何都不起作用
【发布时间】：2017-06-26 09:50:06
【问题描述】：

前段时间 :hover in 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>

【问题讨论】：

您更改了:hover 的颜色，但没有可更改颜色的文本。你预计会发生什么？
提示：您可以通过单击编辑器按钮将 HTML/CSS 制作成可运行的堆栈片段。这样，我们可以轻松重现您的问题。 @Quentin 这次为你做了，但你下一个问题要记住一些事情。 :)
您需要更改导航栏的背景颜色对吗？
谢谢大家，我看不到。我修好了）

标签： html css css-selectors hover

【解决方案1】：

我认为您想在悬停时更改栏的背景颜色

替换这个：

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

用这个：

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

【讨论】：

【解决方案2】：

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

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

到

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

那么它应该可以完美运行。

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

你的代码很完美。只需更改悬停效果即可。

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

你添加 css color : #B0BEC5 来改变文本的颜色，因为没有文本。

【讨论】：

我把它改成了.nav-bar:hover span{ background: #B0BEC5; } 并且工作完美