CODEWITHSUNDEEP
javascriptjqueryjquery-events
user2394156
user2394156

Reputation: 1840

Mouse events bubbling from an absolute-positioned element

I've got this:

<div id="parent">
    <div id="child">
        &nbsp;
    </div>
</div>

$(document).ready(function() {
    $('#parent').on('mouseout', function() {
        alert('Mouse out!');
    });
});

http://jsfiddle.net/aYGBC/2/

Now when I move my mouse on the blue block and move it out somewhere everything's ok. But when I move my mouse on the blue block and then on the red block, the mouseout event is also triggered. Why is this happening and how can I make the mouseout event only occur when I actually move the mouse out of the block?

Upvotes: 0

Views: 670

Answers (1)

bfavaretto
bfavaretto

Reputation: 71939

Use mouseleave, which "is dispatched when a mouse or another pointing device leaves the physical space given to the element and to all of its descendants":

$(document).ready(function() {
    $('#parent').on('mouseleave', function() {
        alert('Mouse out!');
    });
});

Upvotes: 6

Related Questions