Question

This is the html I have:

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

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;
}

And this is my 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?

Answer 1

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.

to fix this use mouseenter and mouseleave events

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

fiddle for you 😀

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