触发事件前鼠标悬停 1 秒

Question

我写了一段简单的代码，在鼠标悬停事件上显示 div。我想在事件发生前将鼠标悬停在元素上 1 秒。关于如何实现这一目标的任何想法？如果可能的话，再做一个简短的解释，这样我下次就知道了。

$('.NavSelect h2').mouseover(function() {
$('.NavGroup').hide();
$('#' + $(this).prop('id').replace('item','content')).show();
});

Answer 1

如果我明白你想做什么，你需要 setTimeout:

$('.NavSelect h2').mouseover(function() {
  setTimeout(() => {
    $('.NavGroup').hide();
    $('#' + $(this).prop('id').replace('item','content')).show();
  }, 1000);
});

在这里，documentation

更新

如果你想在 mouseleave 上清除超时，我建议你这样做：

let time = 0;
$('.NavSelect h2').mouseover(function() {
  time = setTimeout(() => {
    $('.NavGroup').hide();
    $('#' + $(this).prop('id').replace('item','content')).show();
  }, 1000);
}).mouseleave(() => { clearTimeout(time); });

Answer 2

最好将此超时保持在 data 属性并在 mouseout 清除它。

$('.NavSelect h2').mouseenter(function () {
    $(this).data('timeout', setTimeout(function () {
      $('.NavGroup').hide();
      $('#' + $(this).prop('id').replace('item','content')).show();
    }, 1000));
}).mouseleave(function () {
    clearTimeout($(this).data('timeout'));
    alert('mouse left');
});

触发事件前鼠标悬停 1 秒

Mouseover for 1 second before triggering the event

javascript

jquery

mouseevent

mouseover

更新