jquery mouseover or hover

Posted by 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.

Trackback URL for this post: http://davidejones.com/blog/1324-jquery-mouseover-hover/trackback/

Being Sociable...

  • If you like this article then please share it on your favourite social network and follow me on twitter for the latest updates

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>