导航菜单收缩 - 字体颜色答案

【问题标题】：Navigation menu shrink - font color导航菜单收缩 - 字体颜色
【发布时间】：2016-07-30 09:40:52
【问题描述】：

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

我尝试了以下方法：

$(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

【问题讨论】：

标签： jquery css wordpress

【解决方案1】：

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

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

【讨论】：

非常感谢。您的回答包括我的解决方案以及非常有用的提示和指导，谢谢

【解决方案2】：

您只能在 css 下方添加用于调整标题字体颜色的更改：

CSS：

.shrinknav a.shrinkmenufont {
  color: #000;
}

【讨论】：

【解决方案3】：

$(window).scroll(function() {
   if ($(document).scrollTop() > 20) {
       $('ul.art-hmenu>li>a').css('color', 'black');
   } else {
       $('ul.art-hmenu>li>a').css('color', 'white');
   }
});

【讨论】：

你应该避免在你的 JS 代码中加入 CSS 样式。
有效！然后提问者将决定选择哪一个！
提问者“user2502658”并且是不是你。这个问题被包括我在内的几个人回答了！每个正确答案！然后提问者决定哪个一个使用！就是这样！我的部分线程已关闭！
@AdamP。冷静下来。这个网站是关于学习和帮助他人的，这就是我正在努力做的事情——对于你、OP 和任何其他在未来阅读这个问题的人。我的第一条评论是关于不要将 CSS 样式放入 JS 代码中的指导，因为这是非常糟糕的做法。例如，您在 DOM 中看到一个元素应用了样式，而您在 HTML 源代码和 CSS 中都看不到，因此您必须在 JS 中搜索才能找到它。如果您想了解有关“关注点分离”这项研究的更多信息。