9

我目前正在做一个项目，当我悬停元素时我必须让一些东西弹出，并且在释放元素后它应该在一段时间后隐藏，但是如果我悬停弹出框本身，计时器应该停止并且弹出框不应该隐藏。

所以我尝试了一个简单的计时器，该计时器在释放触发弹出框的元素后被激活，当我悬停弹出框时，计时器停止。但是这样做时出现了一些问题。我有很多元素要悬停，当我在短时间内将它们全部悬停时，计时器会被覆盖，并且没有像应有的那样工作。

所以我为我悬停的每个元素实现了一个特定的计时器。我将元素的 id 分配给弹出框内的数据属性，因此我知道哪个弹出框属于哪个元素。当我悬停元素时，将显示弹出框。当我释放元素时，计时器启动，计时器 ID 分配给我悬停的元素内的数据属性。当我现在将鼠标悬停在弹出框时，我会从弹出框中获取相应的 elemnt-id，它获得了相应的计时器 ID，然后我清除了这个特定的计时器。但是它不起作用，当缓慢地悬停和释放其中一个元素时，一切似乎都可以正常工作，但是如果在我可以悬停的元素之间走得更快一些，就会出现一些问题。弹出窗口有时会在几秒钟后随机隐藏。我找不到我做错了什么？如果有人知道如何做得更好，那就太棒了。代码：

$(".timelineTour")
         .popover({
             offset: 10,
             trigger: 'manual',
             animate: false,
             html: true,
             placement: 'right',
             template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); }); console.log(\'mouseover popover\');"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'



        }).mouseenter(function(){
          $('.timelineTour').not($(this)).popover('hide');
          $(this).popover('show');

        }).mouseleave(function(){
          var current = this;
          var t = window.setTimeout(function(){
          $(current).popover('hide');},1000);
          $(current).attr("data-timer",t);
        });

        $(".popover").live("mouseenter",function () { 
             var k = $(this).find('.popoverContent').attr("data-tour-id");
             var z = $('#'+k).attr("data-timer");
             window.clearTimeout(z);      
         });
4

0 回答 0