0

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

我遇到的问题是 Chrome 浏览器导航中的鼠标悬停（悬停）效果。jquery 似乎适用于所有其他浏览器而不是 chrome。

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

但这是最重要的，我在 12 台不同的计算机上尝试过，它们都显示网站正常，只有 2 台计算机（包括客户端的）在左侧显示导航时出现问题。

有没有人知道发生了什么？

4

4 回答 4

3

您应该考虑使用 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;
}

然后，您应该通过删除基于 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构造来缩短代码。( http://api.jquery.com/toggleClass/ )

于 2013-03-06T00:32:29.367 回答
1

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

你可以在这里查看：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(){
        ...

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

例如，而不是这个：

$('#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");
});
于 2013-03-06T00:35:36.303 回答
0

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

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

于 2013-03-06T00:37:45.833 回答
0

在此处输入图像描述

当您单击一项时，它看起来像这样

于 2013-03-06T00:38:11.927 回答