带有隐藏内容的 jQuery 悬停

Question

我有以下代码...

jQuery(function($) {
  var timer;

  $('.action-viewer').hide();
  $('.task').on('mouseover', function() {
    li = $(this);

    timer = setTimeout(function() {
      li.find('.action-viewer').show();
    }, 400);

  }).on('mouseout', function() {
    clearTimeout(timer);
    $(this).find('.action-viewer').hide();
  });
});

body {
  padding: 15px
}
* {
  padding: 0;
  margin: 0;
}
.task-list {
  list-style: none
}
.task {
  padding: 10px;
  border-top: 1px solid #EFEFEF
}
.action-viewer {
  border-top: 1px solid #CCC
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="task-list">
  <li class="task">This is task number 01
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 02
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 03
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 04
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 05
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <ul>

应该发生的情况是，当您将鼠标悬停在任务上时，将显示操作面板并且用户可以单击该链接。但是，当我将鼠标移向链接时，它会消失。这在没有计时器的情况下有效，但我需要延迟。

有什么建议吗？

Answer 1

您可以使用mouseleave event 而不是mouseout event。

这样做时，离开元素并将鼠标悬停在子元素上时不会触发事件。

这是更新后的示例：

jQuery(function($) {
  var timer;
  $('.action-viewer').hide();
  $('.task').on('mouseover', function() {
    var self = this;

    timer = setTimeout(function() {
      $(self).find('.action-viewer').show();
    }, 400);
  }).on('mouseleave', function() {
    clearTimeout(timer);
    $(this).find('.action-viewer').hide();
  });

});

body {
  padding: 15px
}
* {
  padding: 0;
  margin: 0;
}
.task-list {
  list-style: none
}
.task {
  padding: 10px;
  border-top: 1px solid #EFEFEF
}
.action-viewer {
  border-top: 1px solid #CCC
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="task-list">
  <li class="task">This is task number 01
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 02
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 03
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 04
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 05
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <ul>

Answer 2

对mouseenter/mouseleave和delay()使用简写hover()方法：

jQuery(function ($) {
    var timer;

    $('.action-viewer').hide();

    $('.task').hover(function () {
        $(this).find('.action-viewer').delay(400).show(0);
    }, function () {
        $(this).find('.action-viewer').stop().hide();
    });

}); 

-jsFiddle-