导航菜单缩水 - 字体颜色

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

Answer 2

你可以只添加以下的CSS调整大小的标题字体颜色改变：

CSS：

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

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