某些计算机上的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在下面指出的那样，我没有注意到一些功能，即当悬停属于菜单项的部分时，应突出显示菜单项。 / p>

我仍然建议在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/）

Answer 2

尝试调试此类问题时，最好确保代码验证。

您可以在此处查看：http://validator.w3.org/

通过在您的网站上运行验证，您似乎错过了所需的属性：在脚本代码上输入内容。

尝试将代码更改为以下内容：

<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        ...

对于奖励积分，您可以重构鼠标。

e.g。而不是：

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

这样做：

$("ul.nav li").hover(function() {
    $(this).removeClass("inactive").addClass("active");
}, function() {
    $(this).removeClass("active").addClass("inactive");
});

Answer 3

我知道这听起来有点明显，但您的客户是否启用了JavaScript ？这可以在Chrome设置/高级设置/隐私/内容设置/ JavaScript下找到。

chris-mv 使用CSS代替JavaScript的答案是比使用JQuery更好的解决方案。

Answer 4

单击一个项目

时看起来像这样