如何使 mouseenter 和 mouseleave 事件协调工作？

Question

我有一个网站，当用户将鼠标悬停在星星上以显示弹出框以及鼠标离开以隐藏该弹出框时，我需要。

我正在使用 jquery 来执行此操作，如下所示：

  $('.stars-rating-overview').mouseenter(function () {
    setTimeout(function () {
        $("#starRatingStats").show();
    }, 300);
   }).mouseleave(function () {
    setTimeout(function () {
        $("#starRatingStats").hide();
    }, 300);
   });

上面代码的问题有时是弹出窗口显示并且不会消失，就好像 mouseleave 没有触发一样。

您能否指导我如何使这两个事件协调工作，以便当用户意外将鼠标悬停在星星上时弹出框不会立即显示，并处理鼠标离开星星后弹出框显示的情况？

Answer 1

我建议您在开始另一个之前清除超时：

  var ts = 0, th =0;
  $('.stars-rating-overview').mouseenter(function () {
    clearTimeout(th);
    ts = setTimeout(function () {
        $("#starRatingStats").show();
    }, 300);
   }).mouseleave(function () {
    clearTimeout(ts);
    th=setTimeout(function () {
        $("#starRatingStats").hide();
    }, 300);
   });