javascript - jquery .hover() 困惑

Question

我目前正在编写我的投资组合页面，我遇到了一个奇怪的悬停状态行为，我不明白。我在页面顶部的导航栏中有一些链接。链接完全用 :hover 和一切定义。现在，当我将鼠标悬停在链接所指站点的不同部分时，我还希望链接的颜色发生变化。所以我写了这个:

/* Navlink colors */
$('#portfolio').hover(function() {
       $('#portLink').css('color','#FF9900');
    }, function() {
       $('#portLink').css('color','inherit');
});
$('#about').hover(function() {
       $('#aboLink').css('color','#FF9900');
    }, function() {
       $('#aboLink').css('color','inherit');
});
...

起初它似乎可以工作，但是当您滚动到博客然后将鼠标移到导航栏上时，css :hover 似乎不再工作了。这是我的测试站点:

http://www.henning-marxen.de/test/index.html (别笑那是占位符^^)你知道它为什么会这样吗？我很困扰。非常感谢您。

Answer 1

你应该为此使用 CSS，而不是 jQuery:

#portLink:hover, #about:hover { color: #FF9900; }

或者(更明确地匹配您的 JS):

#portfolio:hover #portLink, #about:hover #aboLink { color: #FF9900; }

如果您的链接元素不是那些第一个选择器的后代，请使用+ 将它们分组(如本 fiddle 所示):http://jsfiddle.net/B8Xuw/ *注意这是假设他们是 sibling 而不是 parent > child

#portfolio:hover + #portLink, #about:hover + #aboLink { color: #FF9900; }