Question

我正在尝试创建一个下拉菜单，当您将鼠标悬停在按钮上时，div会显示在其下方，这是我的导航栏的html代码和div我希望在您将鼠标悬停在

<ul class="buttonleft"> 
    <li id="lan"><a href="#language"><img id="topflag" src="images/flags/gb.png" alt="GB"/> English <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#search">Search and Book <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#offers">Latest Offers <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#offers">Car Hire <img src="images/arrow.png" alt="Arrow" /></a></li> 
    <li><a href="#offers">Contact Us <img src="images/arrow.png" alt="Arrow" /></a></li> 
</ul>         

<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
    <a href="#lan=1"><img id="topflag" src="images/flags/es.png" alt="ES"/> Español</a>
    <a href="#lan=2"><img id="topflag" src="images/flags/de.png" alt="DE"/> Deutsch</a>
    <a href="#lan=3"><img id="topflag" src="images/flags/fr.png" alt="FR"/> Français</a>
    <a href="#lan=4"><img id="topflag" src="images/flags/it.png" alt="IT"/> Italiano</a>
    <a href="#lan=4">More</a>
</div>

这是我正在使用的jQuery代码：

$(document).ready(function(){
    $("#lan").hover(function(){
        $("#dropmenu2").fadeToggle("fast");
        $(this).toggleClass("active");
    });
});

当我将鼠标悬停在具有id lan的按钮上时，我会设法做到这一点，但是当鼠标离开按钮时，div下拉的meny消失，有没有办法让下拉框保持，这样你就可以移动到下拉菜单，然后当用户移动鼠标离开下拉菜单时，它将消失

Answer 1

尝试

$(document).ready(function(){
   $("#lan>a").bind({    
    mouseout : function(){
      $("#dropmenu2").fadeOut("fast");
      $(this).removeClass("active");
    },
    mouseenter: function() {
        $("#dropmenu2").fadeIn("fast");
        $(this).addClass("active");
    }
})

DEMO

Reference

Answer 2

不使用悬停，而是使用鼠标悬停作为您的功能，然后使用mouseout和其他功能，以及之后您想要发生的事情。将mouseout函数附加到#ian。

Answer 3

点击此处.. http://jsfiddle.net/chin/naF4J/1/

Answer 4

hover方法接受两个函数，一个是mouseenter，另一个是mouseout。

$("#lan").hover(function() {
    //this is mouseenter
}, function() {
    //this is mouseout
});

Jquery Toggle下拉菜单

4 个答案:

DEMO