Stephen Belanger Stephen Belanger - 3 months ago 15
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 events...how 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(document).ready(function(){
jQuery('#menu li ul').hide();
jQuery('#menu li').mouseover( function() {
jQuery(this).children("ul").show('fast').stop;
return false;
});
jQuery('#menu li').mouseout( function() {
jQuery(this).children("ul").hide('fast').stop;
return false;
});
});

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

Answer

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() {
		jQuery(this).children('ul').show('fast');
		return false;
	},
	function() {
		jQuery(this).children('ul').hide('fast');
		return false;
	}
);