Question

我正在使用一个放在div上的表单，当它悬停在屏幕上时会移入和移出屏幕。为了使其生效，我使用jquery .hover()事件：

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

问题是我在该表单中使用jquery UI datepicker，当我移动到窗口小部件以选择日期时，div的mouseleave事件将执行并且表单移出。我试图找到一种方法来检测日期选择器的mouseenter事件，但我找不到避免这种情况的方法。 Here is an example of the problem

Answer 1

datepicker元素是在div之外创建的，因此不会进行悬停。它被创建为空但显示尚未设置为＆＃34; none＆＃34;，然后在第一次出现时填充日历的内容，之后它只是设置为display：none to hide。

所以我想检查两种情况，是datepicker为空，还是设置为display：none。包裹你的隐藏动画意味着当datepicker打开时，div无法隐藏：

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

现在有一个副作用，如果你打开datepicker，然后点击弹出div之外的某个地方，它会关闭datepicker但不会将div滑回。这个位检查我们不要超过datepicker或pop-out div并触发un-hover操作：

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

现在，如果日期选择器在此次点击时淡出，那么它还没有显示：无;所以mouseout没有触发隐藏。如果它不是完全不透明：1则它必须是淡入淡出或已经隐藏，所以我将if子句更改为：

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

通过jquery ui datepicker检测mouseover事件

1 个答案: