CODEWITHSUNDEEP
jqueryonmouseoverslidedownslideuponmouseout
Vou Dini
Vou Dini

Reputation: 21

How do I keep the DIV from jumping onMouseOver?

The goal of this little snippet is to (by default) show image data then remove it via "slideDown" onMouseOver. It works mostly, however when the info is displayed if you hover over the text, the div jumps up and down crazy-like. Any help to remedy this is appreciated!

Demo: http://jsfiddle.net/voudini/SggsV/

Upvotes: 2

Views: 613

Answers (1)

Gopesh
Gopesh

Reputation: 3950

Try using onmouseenter and onmouseleave

Try this

$('.hoverbox')
    .mouseenter(function(){
        $(".hoverinfo", this).stop(true, true).slideUp(400);
    })
    .mouseleave(function(e){

        $(".hoverinfo", this).stop(true, true).slideDown(400);
    });

Updated Fiddle

Check its documentation

Mouse Enter and Mouse Leave

The mouseenter event differs from mouseover in the way it handles event bubbling. If mouseover were used in this example, then when the mouse pointer moved over the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseenter event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse enters the Outer element, but not the Inner element.

Upvotes: 4

Related Questions