How to stop Mouseleave from starting on elements that appear above the target?

Question

jQuery mouseleave seems to run on any coverage elements. I do not want these coverage elements to be considered “outside” my target area. Here is a simple example using datepicker from jQueryUI:

http://jsfiddle.net/6Wm9L/

$("#datepicker").datepicker({});

$(".wrapper")
.mouseenter(function(){
    $("#status").html("Status: Mouse is INSIDE");
})
.mouseleave(function(){
    $("#status").html("Status: Mouse is OUTSIDE");
});

Note that the mouse is triggered when the mouse is above the dumper. What is a good solution to prevent this for an example datepicker? And what good solution for any future elements can I add that encompass the goal?

Answer 1

relatedTarget :

.mouseleave(function(e){
    if($(e.relatedTarget).closest('.ui-datepicker').length) return;
    $("#status").html("Status: Mouse is OUTSIDE");
});

- DEMO -