Question

当您将鼠标悬停在购物车上时，它会显示下面的2个容器。我还设置它来保持容器显示，如果你在它们可见后悬停在它们上面。

我需要从鼠标退出购物车图标到输入容器的延迟。因此，当您将鼠标悬停在容器上时，容器会保持可见。

这是我的代码：

$(document).ready(function() {
    $('#carticoncontainer, #userinfocontainer, #containerpoint').hover(function() { 
        setTimeout("#userinfocontainer, #containerpoint", 2000); 
        if ($("#userinfocontainer, #containerpoint").is(":hidden") == true) {
            $("#userinfocontainer, #containerpoint").show();
        } else {
            $("#userinfocontainer, #containerpoint").hide();
        }        
    });    
});

Answer 1

您可以使用下面的计时器。

当鼠标离开元素时，我们可以启动一个隐藏元素的计时器，但是如果鼠标在计时器用完之前回到其中一个元素，我们将取消计时器，这样元素就不会被隐藏

$(function() {
  var timer;
  $('#carticoncontainer, #userinfocontainer, #containerpoint').hover(function(e) {
    clearTimeout(timer);
    $("#userinfocontainer, #containerpoint").show();
  }, function() {
    timer = setTimeout(function() {
      $("#userinfocontainer, #containerpoint").hide();
    }, 500)
  });
});

#containerpoint,
#userinfocontainer {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="carticoncontainer">carticoncontainer</div>
<div id="userinfocontainer">userinfocontainer</div>
<div id="containerpoint">containerpoint</div>

如何在我的.hide函数中添加超时功能？

1 个答案: