Question

This is a code for a drop down menu. It is designed to drop-down (umdown) when the cursor moves over button. But when the cursor moves away from Multiple the umdown goes away.

HTML markup:

<div id="button"><span id="text">Down</span></div>

<div id="umdown">
    <div id="multi">Multiple</div>
    <div id="sd">Single</div>
</div>

CSS code:

#button{
    position:relative; top:1px; background-color:#060; width:200px; height:30px; background-image:url(../images/btn_bg.jpg); cursor:pointer;
}

#text{ position:absolute; margin-top:5px; text-align:center; width:200px; height:30px; font-stretch:expanded; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#000; font-weight:bold; font-size:17px;}

#multi{
    width:160px; margin-left:5px;
}

#sd{
        width:160px; margin-left:5px;
}


#umdown{
    position:relative; left:30px; height:50px; background-color:#900; width:170px; cursor:pointer; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#000; font-size:14px;
}

Javascript code:

$('#button').bind('mouseover',function(){
    $('#umdown').fadeIn();});
    $('#umdown').bind('mouseover',function(){
                $('#umdown').show();     });

    $('#umdown').bind('mouseout',function(){                                                                $('#umdown').fadeOut();
    });

Let me know what I have done wrong.

Thanks
Jean

Answer 1

Instead of mouseout here, you want mouseleave, so replace this:

$('#umdown').bind('mouseout',function(){
  $('#umdown').fadeOut();
});

With this:

$('#umdown').bind('mouseleave',function(){
  $(this).fadeOut();
});

The main difference is in the mouseleave docs:

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

I would suggest using .stop() in this case as well to handle fade/hover issues, so your overall code looks like this:

$('#button').bind('mouseover',function(){
  $('#umdown').stop(true, true).fadeIn();
});
$('#umdown').bind('mouseleave',function(){
  $(this).stop(true, true).fadeOut();
});​

You can see a working demo here