Question

I’m using jquery .hover function to show a list when your mouse enters a button. But when I try to put my mouse into this list and select some element, the list would disappear. I think that’s because the .hover function is associated with the button instead of the list. So how could I associate the mouseover event with the button and the mouseleave event with the button and the whole list respectively?

Answer 1

You’ll need to not use .hover and instead bind the mouseenter and mouseleave to the desired elements.

$(thelist).on("mouseleave",function(){
    // hide the list
});
$(thebutton).on("mouseenter",function(){
    // show the list
});