jQuery .hover无法在Safari或Chrome中工作

我目前正在尝试在所有浏览器中正确渲染一些jQuery悬停效果。目前，Firefox，IE，Opera都在做他们应该做的事情。但是，Safari和Chrome不会。jQuery .hover无法在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中我是一个LL快乐......然后我做了跨浏览器的检查，我得到了再一次伤心..

您可以在现场看到它在行动： http://roboticmonsters.com/who

来源

2011-03-07 haxxxton

，这样您就可以给予好评，帮助解答，并接受一个答案的解决方案，以显示您欣赏到其他用户。 –

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

IE：

enter image description here

铬：

enter image description here

来源

2011-03-07 15:29:39 anothershrubery

+1的截图:) –

哇谢谢你这...我责备从jqueryui网站复制和粘贴，然后编辑变量名称：S ..愚蠢的副本粘贴 – haxxxton

$的CSS需要对象：

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

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

这样，您可以在一个指定几个CSS规则：

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

如果您得到 CSS规则的价值，只是在名称作为一个字符串传递：

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

来源

2011-03-07 15:12:46

.css也可以采用属性名称和值，如问题代码中所示。 – ScottE

哦！谢谢你让我知道 –

感谢您的帮助 – haxxxton

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

$("#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的回答

来源

2011-03-07 15:32:59

谢谢为您的帮助 – haxxxton

很可能是因为您尝试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', '');  
       } 
      ); 
});

来源

2011-03-07 15:34:10

感谢您的帮助 – haxxxton

jQuery .hover无法在Safari或Chrome中工作

回答

相关问题