Question

我试图让第一个方框开始，然后显示更大的盒子有点延迟然后当我移动鼠标悬停在大盒子上时，大盒子仍然出现。但是，我的代码工作不正确。

如果有人可以帮我解决一下？感谢

    var timeout;
$("#box1").hover(function () {
    clearTimeout(timeout);
    $("#box2").delay(500).show();
}, function () {
    timeout = setTimeout(function(){
      $("#box2").delay(500).hide();
    },500);
});

if($("#box2").is(':hover')){
$("#box2").show();
}

Answer 1

var timeout;
$("#accountIcon").hover(function () {
    clearTimeout(timeout);
    $("#accountPopup").delay(500).show(500);
}, function () {
    setTimeout(function(){
      $("#accountPopup").delay(500).hide(500);
    },500);
});

if($("#accountPopup").is(':hover')){
$("#accountPopup").show();
}

DEMO

我认为这是通过将div包装在一个div中来实现这一目标的好方法

<div class="conatiner">
    <div id="accountIcon"></div>
     <div id="accountPopup"></div>
</div>

.conatiner{
    overflow:hidden;
}


var timeout;
$(".conatiner").hover(function () {
    clearTimeout(timeout);
    $("#accountPopup").delay(500).show(500);
}, function () {
    setTimeout(function(){
      $("#accountPopup").delay(500).hide(500);
    },500);
});

DEMO HERE

当您使用悬停时......您可以使用具有可见性和转换延迟的css

<div class="conatiner">
    <div id="accountIcon"></div>
     <div id="accountPopup"></div>
</div>


.conatiner:hover #accountPopup{
   display: block;
   -webkit-transition-delay: 1s; /* Safari */
   transition-delay: 1s;
}

DEMO

Answer 2

尝试分配课程hovered（查看Javadoc）：

CSS

.hovered { display:block }

在#accountIcon上的hovered分配班#accountPopup的鼠标中心。

然后，在mouseleave上，如果目标元素（#accountPopup）不可见，只需删除该类。

$('#accountIcon').on('mouseenter', function() {
    $('#accountPopup').addClass('hovered');
}).on('mouseleave', function() {
    var target = $('#accountPopup');
    if (!target.is(':visible')) {
        target.removeClass('hovered');
    }
});
$('#accountPopup').on('mouseleave', function() {
    $(this).removeClass('hovered');
});

悬停不同div时超时悬停延迟

2 个答案: