在jQuery UI Datepicker上检测Mouseover事件

Question

I am using a form placed on a div that moves in and out of the screen when hover on it. For that to take effect I use jquery .hover() event:

$('#formulario').hover(
    function () {
        $(this).stop().animate({'marginRight':'-2px'},200);
        },
    function () {
        $(this).stop().animate({'marginRight':'-345px'},200);
        }
    );

The problem is I am using jquery UI datepicker in that form, and when I move to the widget to select the date, the div's mouseleave event executes and the form moves out. I have tried to find a way to detect the mouseenter event to the datepicker but I can't find a way to avoid this. Here is an example of the problem

Answer 1

The datepicker element is created outside of your div so doesn't carry the hover. It is created empty but display not yet set to "none", it is then filled in with the contents of the calendar when it first appears, after that it is simply set to display: none to hide.

So I wanted to check for two situations, is the datepicker empty, or is it set to display: none. This wrapped around your hide animation means the div cannot hide while the datepicker is open:

if ($('#ui-datepicker-div').html() == '' || $('#ui-datepicker-div').css('display') == 'none') {
    $(this).stop().animate({'marginRight':'-345px'},200);
}

Now there was a side effect of if you open the datepicker, then click somewhere off the pop-out div, it closes the datepicker but doesn't slide the div back in. This bit checks we're not over either the datepicker or the pop-out div and triggers the un-hover action:

$(document).click(function () {
    if ($("#formulario:hover, #ui-datepicker-div:hover").length == 0) {
        $('#formulario').trigger('mouseout');
    }
});

Now though, if the datepicker was fading out on this click, it wasn't yet display: none; so the mouseout didn't trigger the hide. If it isn't exactly at opacity: 1 then it must be fading or already hidden, so I changed that if clause a bit more to:

if ($('#ui-datepicker-div').html() == '' || $('#ui-datepicker-div').css('display') == 'none' || $('#ui-datepicker-div').css('opacity') < 1) {
    $(this).stop().animate({'marginRight':'-345px'},200);
}