CODEWITHSUNDEEP
jquerymouseover
Codename
Codename

Reputation: 462

jQuery mouseover not working as intended

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?

Upvotes: 1

Views: 3247

Answers (4)

ckundo
ckundo

Reputation: 1569

Try using mouseleave. Re mouseout:

This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the Inner element in this example, a mouseout event will be sent to that, then trickle up to Outer. This can trigger the bound mouseout handler at inopportune times. See the discussion for .mouseleave() for a useful alternative.

Upvotes: 0

Christian
Christian

Reputation: 19740

You don't need to (and shouldn't) use javascript for this effect. You can do it with CSS, which is cleaner and more semantic :). Example:

​a.twitter {
    display: block;
    width: 300px;
    height: 300px;
    background: url('http://www.simplyzesty.com/wp-content/uploads/2012/01/twitter_newbird_boxed_whiteonblue2.png');
}

a.twitter span {
    opacity: 0;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

a.twitter:hover span {
    opacity: 1;
}

jsFiddle: http://jsfiddle.net/Ut4Gx/

Upvotes: 0

Jarry
Jarry

Reputation: 1931

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 :D

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

Upvotes: 3

iambriansreed
iambriansreed

Reputation: 22241

In your CSS:

// left padding is for the bg image to be visible

// is not a valid symbol for comments.

They have to be wrapped in /* */ like: 

/* left padding is for the bg image to be visible */

Upvotes: 1

Related Questions