jquery - 导航菜单缩小-字体颜色

Question

当标题在滚动时调整大小时，我很想更改菜单文本的颜色。

我尝试了以下方法:

$(window).scroll(function() {
  if ($(document).scrollTop() > 20) {
    $('ul.art-hmenu>li>a').addClass('shrinkmenufont');
  } else {
    $('ul.art-hmenu>li>a').removeClass('shrinkmenufont');
  }
});

与:

.shrinkmenufont {
  font-color: black;
}

我可以看到函数正在执行，但是当用户向下滚动时字体的颜色没有从白色变为黑色

如有任何提示，我们将不胜感激

谢谢

链接:

Website

Answer 1

您有两个问题。首先，设置文本颜色的 CSS 属性只是 color，而不是 text-color。其次，将颜色设置为橙色的规则是 ul.art-hmenu > li > a.active。这比 .shrinkmenufont 具有更高的特异性，因此覆盖它。对于要使用的黑色，您需要使规则更具体，或者相同但放在后面。试试这个:

ul.art-hmenu > li > a.shrinkmenufont {
    color: 'black';
}