javascript - jQuery 悬停效果在某些计算机上的 Google Chrome 中不起作用

Question

这是我正在做的事情的链接

我遇到的问题是 Chrome 浏览器导航中的鼠标悬停(悬停)效果。看来 jquery 对于所有其他浏览器都工作得很好，但对 chrome 则不然。

http://squ4reone.com/domains/ottawakaraoke/index.php

但更关键的是，我在 12 台不同的计算机上尝试过，它们都很好地显示了网站，只有 2 台计算机(包括客户端的计算机)在显示左侧导航时出现问题。

有人知道发生了什么吗？

Answer 1

您应该考虑使用 CSS 解决此问题，而不是根据鼠标悬停更改类。

如果你改变你的CSS:

.inactive{
    font-size:115%;
    margin-top:3%;
    padding:1%;
}

.active{
    text-decoration:none;
    background:#e1edff;
    font-size:115%;
    margin-top:3%;
    padding:1%;
}

致:

.menu-element{
    font-size:115%;
    margin-top:3%;
    padding:1%;
}

.menu-element:hover {
    text-decoration:none;
    background:#e1edff;
}

然后，您应该通过删除基于鼠标悬停/离开切换 CSS 类的代码并将其设置为所有元素的 .menu-element 来在不同浏览器中获得一致的行为。

编辑:正如@iGanja在下面指出的，我没有注意到一些功能，即当悬停属于菜单项的部分时，菜单项应该突出显示。

我仍然建议在 CSS 中对菜单本身执行鼠标悬停效果，而不是从事件中删除容器 ID:

$('#home').mouseenter(function(){
    $('li#NAVhome').removeClass('inactive').addClass('active');
});

$('#home').mouseleave(function(){
    $('li#NAVhome').removeClass('active').addClass('inactive');
});

//faqs div      
$('#faqs').mouseenter(function(){
    $('li#NAVfaqs').removeClass('inactive').addClass('active');
});
$('#faqs').mouseleave(function(){
    $('li#NAVfaqs').removeClass('active').addClass('inactive');
}); 

//book div
$('#book').mouseenter(function(){
    $('li#NAVbook').removeClass('inactive').addClass('active');
});
$('#book').mouseleave(function(){
    $('li#NAVbook').removeClass('active').addClass('inactive');
});

//connect div
$('#connect').mouseenter(function(){
    $('li#NAVconnect').removeClass('inactive').addClass('active');
});
$('#connect').mouseleave(function(){
    $('li#NAVconnect').removeClass('active').addClass('inactive');
});

这将使菜单效果更加可靠，同时保留鼠标悬停在部分上时的悬停效果。您可以使用 .toggleClass() 而不是 if..else 构造来缩短代码。 (http://api.jquery.com/toggleClass/)