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

标签 javascript jquery google-chrome safari hover

我目前正在尝试使一些 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

最佳答案

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

即:

enter image description here