Question

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.

Answer 1

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