Two options for you:
- CSS's
:hover pseudo-class (but only if you don't have to support IE6)
mouseenter and mouseleave events
CSS's :hover pseudo-class
You can make the browser do all the work if you don't need IE6 support, by using the :hover pseudo-class:
/* Don't show `child` elements inside `parent` elements...*/
parent child {
display: none;
}
/* ...unless the `parent` element is being hovered over */
parent:hover child {
display: block; /* or inline-block or whatever */
}
Live example
However, IE6 doesn't support the :hover pseudo-class except on a elements. IE7+ and all recent other browsers do.
mouseenter and mouseleave events
If CSS doesn't do it for you, you're looking for the mouseenter and mouseleave events, which are IE-specific but emulated by jQuery on all other browsers. jQuery even has a convenient function, hover, for hooking up handlers to both events so you can readily accomplish what you're looking to do.
$(...your parent element...).hover(
function() {
// Called when the mouse enters the element
},
function() {
// Called when the mouse leaves the element
}
);
Here's a complete live example:
HTML:
<div>Hover over me <span class='del'>[X]</span></div>
<div>And me <span class='del'>[X]</span></div>
<div>And me <span class='del'>[X]</span></div>
JavaScript using jQuery:
$('div').hover(
function() {
$(this).find('span.del').show();
},
function() {
$(this).find('span.del').hide();
}
);
The reason you had trouble with mouseover and mouseout is that they bubble, and so your mouseout handler on your parent element was seeing the bubbled mouseout from the underlying element when your mouse moved into the delete element. mouseenter and mouseleave don't bubble, and so they don't have that problem.
