jquery - 当我将鼠标悬停在另一个元素上时，如何使悬停状态保持事件状态？

Question

基本上我有一排缩略图，就像在 Netflix 中一样，我有一个带有相关页面链接的信息弹出框。弹出窗口是绝对定位的，并根据我将鼠标悬停在哪个缩略图上生成内容。

如果我将鼠标从拇指移到它上面，我希望弹出框保持可见，但如果我将鼠标移到远离缩略图的其他地方，它就会消失。

$('.video-thumbs li').hover(

  function(){
      var posLeft = $(this).offset().left;
      var posMid = posLeft + $(this).width()/2;
      var posTop = $(this).offset().top;
      var popoverID = $(this).find('.video-info');
      var popContent = popoverID.html();

      if (posMid > w2) {
          posLeft -= 468;
      }

// Above is all positioning stuff

      setTimeout(function(){
          $('.popovertest').css({   //popovertest is the popover div
              'left': (posLeft + 185) + 'px',
              'top': (posTop - 25) + 'px',
              'transition': 'opacity 0.3s',
              'opacity': 1
          }).html(popContent);
      }, 100);

  }, function(){
      $('.popovertest').css({
        'transition': 0,
        'opacity': 0,
      });
});

不幸的是，我不能使弹出窗口成为子元素，否则我会这样做。

这是我所说的基本内容的 jsfiddle http://jsfiddle.net/gap_stuth/4mpsusq2/

Answer 1

JSFiddle

主要更新代码:

 $('.video-thumbs ul').hover(function (){},function (){ $('.popovertest').hide(200)})

和 popovertest 类的 css 属性

 pointer-events:none;