jQuery .hover无法在Safari或Chrome中运行

Question

我目前正在尝试在所有浏览器中正确渲染一些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

Answer 1

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

IE：

铬：

Answer 2

$。css需要一个对象：

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

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

这样你可以在一个中指定几个css规则：

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

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

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

Answer 3

如果只使用下面的代码，它可以正常工作：

$("#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的回答中显示的非法字符，您的代码就可以正常工作

Answer 4

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

我没有太多时间给你一个关于它为什么被破坏的答案，但以下对我来说是有用的。

    $(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', '');     
                }
            );
});