Question

我创建了一个带有按钮和列表的DIV。我希望当我将鼠标悬停在按钮上时，列表应该显示以及我可以单击列表中的项目。当前列表显示在按钮悬停上，但是当我想要一些List项目点击它的消失时。

我的Html是

<div id="rentin">
            <button id='rentInbutton'>Buy/Rent In</button> 
          <ul>
                  <li><a href="Accomodation.do?action=rin">Accomodation</a></li>
                  <li><a href="VehiclesRentIn.do?action=rin">Vehicles</a></li>
          </ul>
</div>

我的Jquery代码是

$(document).ready(function(){
             $('#rentin ul').hide();
             $("#rentInbutton").hover(function(){
                     $('#rentin ul').show();},function(){
                       $('#rentin ul').hide();
});
}  )

Answer 1

您可以悬停retin而不是悬停retinInButton，因为按钮和列表位于retin内，最初当列表隐藏时retin区域几乎等于按钮区域，当列表是可见的，然后retin将占用等于按钮加列表的空间，并且您不会松开列表，因为鼠标指针仍在retin内，请参阅下面的代码

$(document).ready(function(){
       $('#rentin ul').hide();
        $("#rentin").hover(function(){
           $('#rentin ul').show();},function(){
          $('#rentin ul').hide();
        });
});

<强> JSFiddle Demo

Answer 2

试试这个：

$(document).ready(function() {
    $('#rentin ul').hide();
    $("#rentInbutton").hover(function() {
        $('#rentin ul').show();
    });
})

Answer 3

问题是当鼠标离开按钮时你隐藏了UL，而只有当鼠标离开UL或其容器时才应该隐藏它 - Demo

$("#rentInbutton").mouseover(function(){
    $('#rentin ul').show();
});
$('#rentin').mouseleave(function(){
    $('#rentin ul').hide();
});

列表应该单击按钮Hover

3 个答案: