Question

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

如果我将拇指从拇指上移开，我希望popover保持可见，但如果我将鼠标移动到远离缩略图的位置，我就会消失。

$('.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,
      });
});

不幸的是，我不能将popover作为子元素。或者我愿意。

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

的基本原理

Answer 1

JSFiddle

主要更新代码：

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

类 popovertest

的css属性

 pointer-events:none;

Answer 2

您可以在jquery中使用addClass()和removeClass()，如下所示：

 .active { background: #eee; }

 $('.video-thumbs ul').mouseover(function (){
   $(this).addClass("active");
 });

 $('.video-thumbs ul').mouseout(function (){
   $(this).removeClass("active");
 });

当鼠标悬停在另一个元素上时，如何保持悬停状态？

2 个答案: