Javascript 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似乎不再工作了。这是我的测试站点：

（别笑那些是占位符^^）

---

你知道它为什么会这样吗？我很困惑。非常感谢您。您应该使用CSS，而不是jQuery：

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

或者（为了更明确地匹配您的JS）：

如果链接元素不是这些第一个选择器的后代，请使用

+

对它们进行分组（如本小提琴中所示）：*注意，这假设它们是同级而不是父级>子级

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

试试这个：

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

---

为此，您需要混合使用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');

---

请检查您的HTML标记。我觉得你在href中使用了#portLink，这应该是因为我无法在chrome win7No上重现你的问题没有Id=“portLink”和href=“#portfolio”锚链接应该在那里@Wolff-Hmm它似乎在chrome中起作用。而且，

font

标记也被弃用。为什么要用jQuery做这个呢。。。您可以使用CSS伪类

：hover

更轻松地实现这一点。谢谢！！！！！！！！！11111我刚刚用.addClass（）和.removeClass（）替换了.css（）。使用过滤器等可能更优雅，但现在可以使用了。^^谢谢！

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