JavaScript's onmouseout event not working as expected

Question

I'm having a problem with the `onmouseout` event when used in a dynamically created HTML element. This is the HTML code: ```

``` This is -part of- the JavaScript code (using jQuery 1.7.2): ``` $('body').on('mouseout', 'div#imageWrapper', function () { alert("Test"); }); ``` Clearly, what I want is to detect when the mouse leaves the `div#imageWrapper` and display an alert message. And it works, but not as I expected it to work: When the mouse leaves the `div#imageWrapper` it does displays the alert, but when inside the `div` the mouse goes over the `img` element, it displays it too (as if the `img` element was "an outside part of" the `div`). The weird thing is that when the mouse leaves the image (but the mouse remains on the `div`), it too displays the alert message. Bottom line: JavaScript is treating both the `div#imageWrapper` and the `img` element inside it as two distinct `div#imageWrapper`s. Does anyone know how to fix…

Accepted Answer

Use `mouseenter` and `mouseleave` instead:

```
$('body').on('mouseleave', 'div#imageWrapper', function () {
    alert("Test");
});
```

JavaScript's onmouseout event not working as expected

Solution

Problem