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

如果您的链接元素不是后代的第一个选择器，请使用+对它们进行分组（如此小提琴中所示）：http://jsfiddle.net/B8Xuw/ *请注意这是假设它们是兄弟姐妹而不是父母＆gt;孩子

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

Answer 2

试试这个：

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

Answer 3

你需要混合使用js和css。在您的CSS中，您需要将您的样式应用于悬停状态，但也需要使用我将在此示例中调用current的类。

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

然后你需要做的就是添加或删除这个类，这取决于你滚动到的网站的哪个部分：

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

jquery .hover（）混乱

3 个答案: