jQuery .hover在Safari或Chrome中不起作用 [英] jQuery .hover not working in Safari or Chrome

问题描述

我目前正试图在所有浏览器中正确渲染一些jQuery悬停效果。目前，Firefox，IE，Opera都在做他们应该做的事情。但是，Safari和Chrome不会。

代码如下所示：

 < div id =button1> 
< div id =work_titleclass =title_james> 
语言
< / div> 
< / div> 
< div id =button2> 
< div id =work_titleclass =title_mike> 
 more words 
< / div> 
< / div> 
  

和影响它的脚本看起来像这样

 <脚本> 
 $（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（
函数（）{
 $（。title_james）.css（'width'，'785px' ）
}，function（）{
 $（。title_james）.css（'width'，''）
}）; 
}）; 
< / script> 
  

我试图让它做的是改变CSS悬停在两个大的CSS样式两个元素文字的区域..

我试过了mouseenter .addClass和mouseleave .removeClass的东西，并且根本不起作用。所以当我得到这个工作时firefox我很开心...然后我确实跨浏览器检查，我再次感到难过。

你可以看到它的实际行动：
< a href =http://roboticmonsters.com/who =nofollow noreferrer> http://roboticmonsters.com/who

解决方案

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

IE： b
$ b

Chrome：

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.

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..

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..

You can see it live in action at: http://roboticmonsters.com/who

解决方案

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.

IE:

Chrome:

这篇关于jQuery .hover在Safari或Chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！