Onmouseout Fires Inside The Element It's Set To

I am currently switching the menu of my site from pure JavaScript to jQuery. My menu has a rollout / rollin effect. The menu has an outer wrapper which has an onmouseout event set.

Solution 1:

if i understood your question right.

This might help

$('#inner').on('mouseover', function() {
        mouseIsOverMenu = true;
        setTimeout(menu_rollout, 500);
    });

    $('#inner').on('mouseout', function(event) {
        if (!$(event.relatedTarget).isChildOf("outer")) {
            mouseIsOverMenu = false;
            menu_rollin();
        }
    });

What i did is i have changed the id of #outer to #inner.

Solution 2:

This is a dirty hack, but your problem seems to be with the mouseout function applying too frequently, and what functionality you really want is capturing the mouse leaving the bottom of the menu/content.

Here's some code that will do just that.

$('#outer').on('mouseout', function(event) {
    if(event.clientY >= document.getElementById('outer').offsetHeight){
        mouseIsOverMenu = false;
        menu_rollin();
    }
});

here's the associated jsFiddle