mouseout not fired when hovered element gets covered by another element

Question

I recently discovered a strange behavior with the mouseout event in javascript. Please see my fiddle: http://jsfiddle.net/Uf3xQ/25/

When I hover over the button, the mouseenter event is fired. When I leave the button, the mouseout event is fired. So far so good.

Now when I hover, then click and the click event shows a div which is placed over the button, the mouseout event will also be fired.

But when the div is showed after a short delay using setTimeout for example, the mouseout event won't be fired until I move the mouse.

Can you explain this behavior to me?

UPDATE: I submitted the bug to chromium and they confirmed it. See here: http://code.google.com/p/chromium/issues/detail?id=159389

The bug also occurs in Opera, Safari (WebKit in common) and IE

Answer 1

Try using delegate on the overlay to bubble the event up.
EDIT Fiddle is being slow today and the fiddle I had originally posted didn't have the snipped of code that I used.

this DOES work in fiddle with jQuery version (1.8.2) selected link to jsBIN fork : http://jsbin.com/ugeniq/3/edit

EDIT 2 I just realized that the mouse/over/out without the div didn't work. I've updated the code so now it works with and without the div overlay.

var fail = true;

var button = document.getElementById("button");
var overlay = document.getElementById("overlay");
var log = document.getElementById("log");


button.addEventListener('click', function() {
    if (fail) {

        // mouseout won't be fired until you move the mouse
        window.setTimeout(function() {
            overlay.style.display = 'block';
        }, 0);

    } else {

        // mouseout event is fired instantly
        overlay.style.display = 'block';

    }


    log.innerHTML += 'over' + "<br>";

}, false);

button.addEventListener('mouseover', function() {
    log.innerHTML += 'over' + "<br>";
}, false);

button.addEventListener('mouseout', function() {
    log.innerHTML += 'out' + "<br>";
}, false);

$(overlay).delegate(button, 'mouseover', function() {
        log.innerHTML += 'over' + "<br>";
});

$(overlay).delegate(button, 'mouseout', function() {
        log.innerHTML += 'out' + "<br>";
    });

Answer 2

I browsed WebKit bugzilla and https://bugs.webkit.org/show_bug.cgi?id=4117 appears to be your bug, you should add a new comment to the bug with a link to your testcase, as the testcases linked in the bug seem to be lost (404 error).