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

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

我使用jquery来实现这一点，如下所示：

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

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

---

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

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

  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);
   });

---

您可以添加JSFIDLE或类似的东西吗？