Наведите указатель мыши на кнопку Hover

Question

Я создал один DIV с кнопкой и списком. Я хочу, чтобы при наведении курсора на кнопку, список должен отображаться, а также я могу нажимать на элементы в списке. отображение текущего списка на кнопке, но когда я хочу, чтобы какой-либо элемент списка щелкнул его «Исчезающий».

Мой 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

Проблема заключается в том, что вы скрываете в UL, когда мышь покидает кнопку, вместо этого вы должны скрыть его только тогда, когда мышь покидает UL или ее контейнер - Demo

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

Answer 2

Вы можете парить 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 3

Попробуйте это:

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