jQuery mouseover不能按预期工作 [英] jQuery mouseover not working as intended

问题描述

这是我拥有的html

This is the html I have:

<div id="social">
    <a href="#" class="twitter"><span class="text">Twitter</span></a>
</div>

我打算先隐藏span.text，然后将鼠标悬停在div背景中的图像上.这是我的CSS

What I intend to do is initially hide the span.text and when I hover over the image in the background of the div. This is my css

#social a {
    display:inline-block;
    overflow:hidden;
    padding:4px 0 0 28px;
/* left padding is for the bg image to be visible*/
}
#social a span {
    display:none;
}
#social .twitter {
    background:url(../images/social/twitter.png) no-repeat left top;
}
#social .twitter:hover {
    background:url(../images/social/twitter_hover.png) no-repeat left top;
}

这是我的js:

$("#social a.twitter").mouseover(function(){
  $("span",this).show("slow");
}).mouseout(function(){
  $("span",this).hide("slow");
});

但是发生什么情况是，当我将鼠标悬停在图像上时，它会继续显示和隐藏文本.我要去哪里错了?

But what happens is when I hover over the image it keeps on showing and hiding the text.. Where am I going wrong?

推荐答案

您有一个非常普遍的问题，当显示跨度时，鼠标不再位于a上，因此将调用mouseout事件.

you have a very common problem, when the span shows, the mouse its not any more over the a, so the mouseout event gets called.

使用mouseenter和mouseleave事件来解决此问题

to fix this use mouseenter and mouseleave events

$("#social a.twitter").mouseenter(function(){
  $("span",this).show("slow");
}).mouseleave(function(){
  $("span",this).hide("slow");
});​

为您准备小提琴:D

，并且在css中，注释使用/* */而不是//

and, in css the comments are with /* */ and not with //

这篇关于jQuery mouseover不能按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！