为什么鼠标离开区域时元素没有消失？

Question

当我在 media-slider-wrap 内移动光标时，滑块分页会跟随光标，这就是我想要的。但是当鼠标离开 media-slider-wrap 时，slider-paging 应该立即消失，而是一直跟随鼠标。快速移动光标...

知道如何解决这个问题吗？

Codepen供参考

$(document).ready(function(){
  $(".slider").each(function () {
      _this = $(this);

      _this.mousemove(function(e){
          var offset = _this.offset();
          var rect = e.currentTarget.getBoundingClientRect();

          var x = (e.clientX - rect.left);
          var y = (e.clientY - rect.top);

          $(this).find('.slider-paging').show();
          $(this).find('.slider-paging').css("top", y).css("left", x);

      });
      _this.mouseleave(function(e){
          $(this).find('.slider-paging').hide();
      });

  });
});

.media-slider-wrap {
  width: fit-content;
}
.slider-paging {
  position: absolute;
  top: 0;
  left: 0;
  display:none;
}
.slider-image {
  height: 500px;
  width: 500px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="media-slider-wrap">
  <div class="slider">
     <div class="slider-image"></div>
     <div class="slider-paging">1/4</div>
  </div>
</section>

Answer 1

你没有为 .media-slider-wrap 设置位置

.media-slider-wrap {
  /* margin: 100px; */
  position: relative;
  width: fit-content;
  /* make it work with firefox */
  width: -moz-fit-content;
}

Answer 2

我从 codepen 修改了你的代码，我认为它的灵感来自 Why is the element not disappearing when mouse leaves area?，它现在可以工作了。

$(document).ready(function () {
  $(".media-slider-wrap").each(function () {
    const _this = $(this);
    _this.find('.slider-image').mousemove(function (e) {
      var offset = _this.offset();
      var rect = e.currentTarget.getBoundingClientRect();
      var x = (e.clientX - rect.left);
      var y = (e.clientY - rect.top);
      const sliderPaging = _this.find('.slider-paging');
      const moveX = x > rect.width - sliderPaging.width() ? rect.width - sliderPaging.width() : x;
      const moveY = y > rect.height - sliderPaging.height() ? rect.height - sliderPaging.height() : y;
      sliderPaging.show();
      sliderPaging
        .css("top", Math.max(moveY, rect.top))
        .css("left", Math.max(moveX, rect.left));
    });
    _this.find('.slider-image').mouseleave(function (e) {
      _this.find('.slider-paging').hide();
    });
  });
});

.media-slider-wrap {
  width: fit-content;
  margin-top: 100px;
  margin-left: 100px;
}

.slider-paging {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.slider-image {
  height: 500px;
  width: 500px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="media-slider-wrap">
  <div class="slider-image"></div>
  <div class="slider-paging">1/4</div>
</section>

Answer 3

问题是您的“.slider-paging”元素随光标移动，这导致mouseleave 函数无法执行。您必须确保您的“.slider-paging”元素移动到您的红框边界。将".slider-paging" 的top 和left 限制为矩形的边界。

条件：左侧位置应该从矩形的左端移动到矩形的右端。同样，顶部位置应该从顶端移动到底端。

这是我所做的修复。

$(document).ready(function () {
  $(".media-slider-wrap").each(function () {
    const _this = $(this);
    _this.mousemove(function (e) {
      var offset = _this.offset();
      var rect = e.currentTarget.getBoundingClientRect();
      var x = (e.clientX - rect.left);
      var y = (e.clientY - rect.top);
      const sliderPaging = $(this).find('.slider-paging');
      const moveX = x > rect.width - sliderPaging.width() ? rect.width - sliderPaging.width() : x;
      const moveY = y > rect.height - sliderPaging.height() ? rect.height - sliderPaging.height() : y;
      sliderPaging.show();
      sliderPaging
        .css("top", Math.max(moveY, rect.top))
        .css("left", Math.max(moveX, rect.left));
    });
    _this.mouseleave(function (e) {
      $(this).find('.slider-paging').hide();
    });
  });
});

.media-slider-wrap {
  width: fit-content;
}

.slider-paging {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.slider-image {
  height: 500px;
  width: 500px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="media-slider-wrap">
  <div class="slider-image"></div>
  <div class="slider-paging">1/4</div>
</section>