如何使 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);
   });