jQuery .hover 在 Safari 或 Chrome 中不起作用

Posted 2023-04-13

【中文标题】jQuery .hover 在 Safari 或 Chrome 中不起作用

【英文标题】：jQuery .hover not working in Safari or Chrome

【发布时间】：2011-03-07 15:10:35

【问题描述】：

我目前正在尝试让一些 jQuery 悬停效果在所有浏览器中正确呈现。目前，firefox、IE、opera 都在做他们应该做的事情。但是，Safari 和 Chrome 却没有。

代码如下所示：

<div id="button1">
    <div id="work_title" class="title_james">
    WORDS
</div>
</div>
<div id="button2">
    <div id="work_title" class="title_mike">
    MORE WORDS
</div>
</div>

影响它的脚本看起来像这样

<script>
$(function() 
$("#button2").hover(
function() 
    $("#james").css('z-index', '100')
    $(".title_mike").css('width', '590px')
, function() 
    $("#james").css('z-index', '')
    $(".title_mike").css('width', '')
);
);​
$(function() 
$("#button1").hover(
function() 
    $(".title_james").css('width', '785px')
, function() 
    $(".title_james").css('width', '')
);
);​
</script>

我想要做的是将鼠标悬停在两个大文本区域上时更改 css 样式的两个元素..

我已经尝试了 mouseenter .addClass 和 mouseleave .removeClass 的东西，但根本没有用。所以当我让它在 Firefox 中工作时，我很高兴......然后我做了跨浏览器检查，我得到了又伤心了。。

您可以在以下位置看到它的实际效果： http://roboticmonsters.com/who

【问题讨论】：

在 SO 上，您可以对有帮助的答案进行投票，并接受一个答案作为向其他用户表示感谢的解决方案。

【参考方案1】：

使用 Chrome 中的开发工具，它说每个 javascript 函数的末尾都有一个无效令牌。 IE 开发工具也显示了一个无效的令牌，但它似乎忽略了这一点并正确呈现。如果可以，请检查您的来源并删除令牌。

IE：

铬：

【讨论】：

哇，谢谢你...我责怪从 jqueryui 站点复制和粘贴，然后编辑变量名：S.. 愚蠢的复制粘贴

【参考方案2】：

$.css 接受一个对象：

$("#james").css('z-index': '100');

注意花括号和冒号（不是逗号）。

这样您就可以在一个中指定多个 css 规则：

$("#james").css('z-index': '100', 'height': '100px');

如果您要获取一个css规则的值，只需将名称作为字符串传入：

$("#james").css('z-index'); // returns 100

【讨论】：

.css 也可以只接受属性名称和值，如问题代码中所示。

【参考方案3】：

这可能是因为您试图在 DOM 加载之前绑定到这些事件。

我没有太多时间回答为什么它被破坏了，但以下内容在 chrome 中对我有用。

    $(document).ready(function() 
    $("#button2").hover(function() 
                $("#james").css('z-index', '100');
                $(".title_mike").css('width', '590px');
                ,
                function() 
                $("#james").css('z-index', '');
                $(".title_mike").css('width', '');      
                
            );
    $("#button1").hover(function() 
                $(".title_james").css('width', '785px');
                ,
                function() 
                $(".title_james").css('width', '');     
                
            );
);

【参考方案4】：

如果只使用下面的代码就可以了：

$("#button2").hover(
function() 
    $("#james").css('z-index', '100')
    $(".title_mike").css('width', '590px')
, function() 
    $("#james").css('z-index', '')
    $(".title_mike").css('width', '')
);

否则 Chrome 会报告：Unexpected token ILLEGAL。要亲自查看，请右键单击页面并选择inspect element。点击右下角的小红x。

更新：实际上，如果您删除@anothershubery 的答案中显示的非法字符，您的代码可以正常工作