Stephen Belanger Stephen Belanger - 1 year ago 71
jQuery Question

How do I ignore mouse events on child elements in jQuery?

I have an unordered list with mouseover and mouseout events attached to the li elements. Each contains a link and there is a bit of padding in the li. When I mouseover the li the mouseover event is fired, but when I mouseover the link contained in the li the mouseout and the mouseover events are both fired in order. It seems the child elements are firing their parent elements mouse do I go about stopping this? I want it to just stay mouseovered when mousing over the links, not activating the animations every time I mouse over a link. This is my code;

jQuery('#menu li ul').hide();
jQuery('#menu li').mouseover( function() {
return false;
jQuery('#menu li').mouseout( function() {
return false;

<ul id="menu">
<li><a href="">Some link</a>
<ul>Sub content</ul>

Answer Source

It seems I've found the answer to my own question. For anyone who might have the same problem; try this code instead. It seems hover doesn't bubble into child elements like the other mouse events do.

jQuery('#menu li').hover(
	function() {
		return false;
	function() {
		return false;