jquery mouseover or hover

David Jones
@david3jones
avatar-davidejones

When I’m working with jQuery Its usually for something simple and I just throw together a few simple click and mouse events to get what I want. In a number of my projects I seem to switch between the functions I use, sometimes its mouseover() , mouseout() and sometimes its hover().

$("li").mousover(function(){ 
    	//do something over
}).mouseout(function() { 
    	//do something out
});
$("li").hover(
      function () {
        //do something enter
      }, 
      function () {
        //do something exit
      }
);

Its only until I recently encountered a problem that I really spent the time to check what the difference was. It turns out that mouseover and mouseout fire events for the children of that element. Where as hover actually works with mouseenter and mouseleave without firing for children. In the project I was working on I setup a container div to use mouseover and mouseout which added some html tabs to the container. This seemed perfectly fine but I discovered that using mouseover/mouseout meant the added html kept disappearing when I tried to interact with it along with the other jquery I had in place that was conflicting with it. In the end my particular solution required me to use mouseenter and mouseleave with the live function rather than using hover because I was working with generated html.

Comments

    Comments are currently closed