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

【问题标题】：jQuery .hover not working in Safari or ChromejQuery .hover 在 Safari 或 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 上，您可以对有帮助的答案进行投票，并接受一个答案作为向其他用户表示感谢的解决方案。

标签： javascript jquery google-chrome safari hover

【解决方案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 的答案中显示的非法字符，您的代码可以正常工作

【讨论】：