Javascript jQuery悬停效果不'；在某些计算机上，我不能在谷歌浏览器上工作

这里有一个链接到我正在进行的工作

我遇到的问题是使用Chrome浏览器导航时的鼠标悬停效果。看来jquery在所有其他浏览器上都运行良好，而不是在chrome上

但是这里有一个问题，我在12台不同的计算机上试用过，它们都显示站点很好，只有2台计算机（包括客户的）在左侧显示导航时出现问题

---

是否有人知道发生了什么事？

< P>你应该考虑用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%;
}

致：

然后，您应该删除基于mouseover/leave切换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

构造来缩短代码。（）

< P>你应该考虑用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%;
}

致：

然后，您应该删除基于mouseover/leave切换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

构造来缩短代码。（）

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

您可以在此处检查：

在站点上运行验证时，您似乎缺少所需的属性：脚本标记上的type

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

<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(){
        ...

这样做：

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

---

当试图调试这样的问题时，最好确保您的代码经过验证

您可以在此处检查：

在站点上运行验证时，您似乎缺少所需的属性：脚本标记上的type

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

<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(){
        ...

这样做：

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

---

我知道这听起来有点明显，但是您的客户端是否启用了JavaScript？这可以在Chrome的Settings/Advanced Settings/Privacy/Content Settings/JavaScript下找到

---

chrismv的答案是使用CSS而不是JavaScript，这是比使用JQuery更好的解决方案。

我知道这听起来有点明显，但是您的客户端启用了JavaScript吗？这可以在Chrome的Settings/Advanced Settings/Privacy/Content Settings/JavaScript下找到

chris mv的答案是使用CSS而不是JavaScript，这比使用JQuery更好。

当您单击一个项目时，它看起来是这样的

---

当您单击一个项目时，它看起来是这样的

问题到底是什么？你想发生什么？到底发生了什么？当你提到“客户的”时，你是什么意思？他在网站上做的客户我没有看到Chrome和IE之间的显著差异。你能发布错误的主要屏幕，并在错误发生时提供版本和操作环境吗。（在chrome中看起来不错）到底是什么问题？你想发生什么？到底发生了什么？当你提到“客户的”时，你是什么意思？他在网站上做的客户我没有看到Chrome和IE之间的显著差异。你能发布错误的主要屏幕，并在错误发生时提供版本和操作环境吗。（在chrome中看起来不错）我也在想同样的问题，为什么jQuery…我还注意到，当你点击项目（因此它会滚动到页面的某个部分）时，项目会消失。。。再次在铬。因此，当您必须选择徽标或将鼠标悬停在徽标上以使其成为apear againI时，我的想法是一样的，为什么jQuery…我还注意到，当您单击项目（因此它会滚动到页面的某个部分）时，项目会消失。。。再次在铬。因此，作为徽标，您必须选择它们或将鼠标移到它们上，以便它们再次显示。最初，我也像chirs mv一样询问“为什么使用jQuery？”但当我看到它们正在更改未悬停的其他元素的类时，这是更好的解决方案，并回答了这个问题。最初，我也像chirs mv一样询问“为什么使用jQuery？”，但正如我看到的，他们正在改变没有悬停的其他元素的类，这是更好的解决方案，并回答了这个问题。