Search code examples
jqueryhoverdivisionmouseentermouseout

How to make a division show/hide when I mouseenter/mousexit on a division?

I want to make like that when click/mouseenter on a icon, a division will come out, and when I mouseexit that expanded division, that division will go hide.

I made a script, but it is not working properly:

$("#userpanel").hide();
$("#user").mouseenter(function () 
{
    $("#userpanel").fadeIn("slow").css({"top":"185px","left":p+"px;"});
});
$("#userpanel").mouseout(function () 
{
    $("#userpanel").fadeOut();
});
Solution

  • mouseleave instead of mouseexit? Not sure where you're running into issues. Please explain how it's not doing what you want it to.

    Additionally, you've coded that mouseenter #user makes the #userpanel visible. But then when the mouse leaves #userpanel, #userpanel disappears. So someone would have to first mouseenter the userpanel, then mouseleave the userpanel. Is that the issue?