jquery mouseout of nested div question

Question

I'm trying to fire a function on the mouseout of a div. However when you mousover an element in the div it fires the mouseout.

<div id="my_div">
    <div class="another_div">X</div>
</div>

<script>
$("#my_div").mouseout(function () {
    alert('weeeee, I am out!');
}
</script>

This makes sense but how can I test for the mouseout event only if it is not on a child element?

Answer 1

Try using the MouseLeave event rather than the mouseout, according to the API:

Mouseout fires when the pointer moves into or out from child element, while mouseleave doesn't.

Answer 2

you want this:

http://docs.jquery.com/Events/mouseenter and http://docs.jquery.com/Events/mouseleave