带有隐藏内容的 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 even t 而不是 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>