CODEWITHSUNDEEP
javascriptjquery
Felipe
Felipe

Reputation: 11897

mouseOver() funny behaviour

I'm very curious as to why the blue <div> disappears when I mouse the mouse off the title, as opposed to only disappearing when the mouse if off the whole <div>.

$("#yw1 .portlet-title").mouseover(function(){
    $("#yw1 .portlet-content").slideDown('fast');
});


$("#yw1").mouseout(function(){
    $("#yw1 .portlet-content").slideUp('fast');
});

Here's a demo jsFiddle.

Upvotes: 1

Views: 149

Answers (3)

ShankarSangoli
ShankarSangoli

Reputation: 69915

The reason is mouseout events get bubbled and it hides. Use mouseneter and mouseleave events to solve this.

$("#yw1 .portlet-title").mouseenter(function(){
    $("#yw1 .portlet-content").slideDown('fast');
});


$("#yw1").mouseleave(function(){
    $("#yw1 .portlet-content").slideUp('fast');
});

Demo

Upvotes: 2

epascarello
epascarello

Reputation: 207557

Use jQuery's mouseleave instead of mouseout.

Upvotes: 2

Ry-
Ry-

Reputation: 225281

The reason is because mouseout events bubble, that is to say, when you mouse out of any child, the ancestors will still recieve the event. You can fix this by checking the target against the current target (this). Here's an updated jsFiddle.

$("#yw1").mouseout(function(e) {
    if(e.target === this) {
        $("#yw1 .portlet-content").slideUp('fast');
    }
});

Upvotes: 2

Related Questions