懸停時更改文本顏色

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>

代碼筆

用戶向下滾動后，如何更改懸停時的顏色？

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'});
  });