Question

我试图在悬停时更改文本颜色，但颜色保持与以前相同。

我正在使用脚本添加名为.show的类以在滚动时更改背景，它可以工作，悬浮元素也可以工作，但是color CSS元素无法更改。

有一些尝试在用户向下滚动后添加:hover来更改颜色。我希望一旦用户向下滚动，颜色就会从灰色变为黑色。

.navigation-bar li a {
  display: inline;
  color: lightgrey;
  text-decoration: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  padding: 10px 20px;
  line-height: 70px;
  transition: 0.2s ease color;
  position:relative;
}
.show:hover .navigation-bar li a {
  color: black;
}
.bg {
  width: 100%;
  height: 70px;
  opacity: 1;
}
.show {
  background-color: #bdbdbd;
  opacity: 0.5;
}
.show:hover{
  background-color: #ebe4dd;
  color: black;
  opacity: 1;
}

HTML：

<div class="navigation-bar">
  <div class="bg transition">

<div id="navigation-container">
  <a href="#"><img src="images/logo.png"></a>

  <ul>
    <li><a href="#title">About</a></li>
    <li><a href="#section1">Projects</a></li>
    <li><a href="#section2">Services</a></li>
    <li><a href="#section3">Get in Touch</a></li>
  </ul>
</div>
</div>
</div>

Codepen

一旦用户向下滚动，如何在悬停时更改颜色？

Answer 1

这里的类的顺序元素错误：

.show:hover .navigation-bar li a {
  color: black;
}

这是正确的：

.navigation-bar .show:hover li a {
  color: black;  
}

Answer 2

添加.show时必须定义一个CSS规则。

将此行添加到您的CSS中：

.show  div#navigation-container ul li a{
  color:#000;
}

Answer 3

我不知道我是否正确，但这会在悬停时更改导航栏的文本颜色

$('#navigation-container').hover(function() {
    $('li > a').css({'color':'black'});
  }, function() {
    $('li > a').css({'color':'grey'});
  });

悬停时更改文本颜色

3 个答案: