jquery mouseover or hover

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().

    	//do something over
}).mouseout(function() { 
    	//do something out
      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 are currently closed