Question

I want to trigger an event when the mouse leaves two elements. I found the following jsfiddle which is exactly what I’m looking for:

http://jsfiddle.net/pFTfm/54/

It uses this code:

var count = 0;
$('#d1, #d2').mouseenter(function(){
    count++;
    $('#d3').show();
}).mouseleave(function(){
    count--;
    if (count == 0) { 
        $('#d3').hide();
        $('#d3').css('background-color', 'orange');
    }
});
​

However, the event still gets triggered, as you can see by the div changing its background color.

I want the event only to be triggered when the mouse really leaves both elements.

Answer 1

How about:

var count=0;
$('#d1, #d2').mouseenter(function(){
    count++;
    $('#d3').hide();
}).mouseleave(function(){
    count--;

    setTimeout(function(){
        if (count==0){
                $('#d3').show();
            }
    },50);
});
​

jsFiddle

The small timeout is to make sure the mouse actually left both elements, rather than left one and entered another.