Question

这是下拉菜单的代码。它设计为当光标在按钮上移动时下拉（umdown）。但是当光标远离多个时，umdown就会消失。

HTML标记：

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

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

CSS代码：

#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代码：

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

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

让我知道我做错了什么。

由于让

Answer 1

此处不是mouseout，而是mouseleave，所以请替换为：

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

有了这个：

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

主要区别在于mouseleave docs：

mouseleave事件与mouseout处理事件冒泡的方式不同。如果在此示例中使用了mouseout，那么当鼠标指针移出Inner元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave事件仅在鼠标离开它所绑定的元素时触发其处理程序，而不是后代。因此，在此示例中，处理程序在鼠标离开外部元素时触发，而不是内部元素。

我建议在这种情况下使用.stop()来处理淡入淡出/悬停问题，因此您的整体代码如下所示：

$('#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

Answer 2

据我了解，您只想在悬停在按钮上时切换#umdown的可见性。

$("#button").hover(function(){
  $("#umdown").fadeIn(500);
})


 $("#umdown").mouseleave(function(){
   $(this).fadeOut(300) 
});

查看有效的演示 here

下拉菜单不能用作编码 - jQuery

2 个答案: