javascript jQuery .hover 在 Safari 或 Chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5221276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .hover not working in Safari or Chrome
提问by haxxxton
I am currently trying to make some jQuery hover effects render correctly in all browsers. For the moment, firefox, IE, opera all do what they are supposed to. However, Safari and Chrome do not.
我目前正在尝试在所有浏览器中正确呈现一些 jQuery 悬停效果。目前，firefox、IE、opera 都在做他们应该做的。但是，Safari 和 Chrome 没有。
The code looks like this:
代码如下所示：
<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>
and the script effecting it looks like this
和影响它的脚本看起来像这样
<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>
what I am trying to get it to do is change the css styles two elements on hover over two large areas of text..
我试图让它做的是更改css样式两个元素悬停在两个大文本区域上..
I have tried the mouseenter .addClass and mouseleave .removeClass thing and that didn't work at all.. so when I got this to work in firefox I was all happy... then I did cross browser checking and I got sad again..
我已经尝试过 mouseenter .addClass 和 mouseleave .removeClass 东西，但根本不起作用..所以当我让它在 Firefox 中工作时，我很高兴......然后我进行了跨浏览器检查，我再次感到难过。 .
You can see it live in action at: http://roboticmonsters.com/who
您可以在以下网址实时查看它：http: //roboticmonsters.com/who
回答by anothershrubery
Using the dev tools in Chrome it says there is an invalid token at the end of each of the javascript functions. The IE dev tools shows an invalid token too, but it seems to ignore this and render correctly. Check your source and remove the token, if you can.
使用 Chrome 中的开发工具，它说每个 javascript 函数的末尾都有一个无效的令牌。IE 开发工具也显示无效令牌，但它似乎忽略了这一点并正确呈现。如果可以，请检查您的来源并删除令牌。
IE:
IE：
Chrome:
铬合金：
回答by Adam Hopkinson
$.css takes an object:
$.css 接受一个对象：
$("#james").css({'z-index': '100'});
Note the curly braces and colon (not comma).
注意花括号和冒号（不是逗号）。
This is so you can specify several css rules in one:
这样您就可以将多个 css 规则合二为一：
$("#james").css({'z-index': '100', 'height': '100px'});
If you are gettingthe value of a css rule, just pass in the name as a string:
如果您要获取css 规则的值，只需将名称作为字符串传入：
$("#james").css('z-index'); // returns 100
回答by Geoff Appleford
if just use the code below it works fine:
如果只是使用下面的代码它工作正常：
$("#button2").hover(
function() {
$("#james").css('z-index', '100')
$(".title_mike").css('width', '590px')
}, function() {
$("#james").css('z-index', '')
$(".title_mike").css('width', '')
});
Otherwise Chrome reports: Unexpected token ILLEGAL. To see this yourself, right-click on the page and choose inspect element. Click the small red xin the bottom right.
否则 Chrome 会报告：Unexpected token ILLEGAL. 要自己查看，请右键单击页面并选择inspect element。单击x右下角的小红色。
Update: actually your code works fine if you remove the illegal character as shown in @anothershubery's answer
更新：实际上，如果您删除了@anothershubery 的回答中所示的非法字符，您的代码就可以正常工作
回答by Chris Diver
It's possibly because you are trying to bind to those events before the DOM has loaded.
这可能是因为您试图在 DOM 加载之前绑定到这些事件。
I didn't have much time to give you an answer as to why it was broken, but the following works for me in chrome.
我没有太多时间回答你为什么它坏了，但以下内容在 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', '');
}
);
});
