jquery .hover()混淆

Question

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

/* 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 :悬浮似乎不再工作了。这是我的测试地点：

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

Answer 1

为此，您需要混合js和css。在您的css中，您需要在悬停状态下应用样式，但也需要使用一个类，我将在本例中将其称为current。

.nav-link:hover,
.nav-link.current{
  color:#FF9900;
}

然后，javascript需要做的就是添加或删除类，具体取决于您滚动到的站点的哪个部分：

var navLinks = $('.nav-link');

//each time the user scrolls, reset all links by removing class.
navLinks.removeClass('current');

//Then find the link that needs highlighting and add the class to it.
//There obviously needs to be some logic here to filter the correct link.
navLinks.filter('[href="#portfolio"]').addClass('current');

Answer 2

您应该为此使用CSS，而不是使用jQuery：

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

或者(为了更明确地匹配您的JS)：

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

如果您的链接元素是而不是这些第一个选择器的后代，请使用+对它们进行分组(如本小提琴所示)：http://jsfiddle.net/B8Xuw/ *注意，这假设它们是兄弟姐妹而不是parent>child。

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

Answer 3

试试这个：

 /* Navlink colors */
    $('#portfolio').hover(function() {
       $('[href="#portfolio"]').css('color','#FF9900');
    }, function() {
       $('[href="#portfolio"]').css('color','inherit');
    });
    $('#about').hover(function() {
       $('[href="#about"]').css('color','#FF9900');
    }, function() {
       $('[href="#about"]').css('color','inherit');
    });