Cuando muevo el cursor dentro de media-slider-wrap, la paginación del control deslizante sigue al cursor, que es lo que quiero. Pero cuando el mouse deja el control deslizante multimedia, la paginación deslizante debería desaparecer de inmediato, en su lugar, sigue al mouse. Si mueve el cursor muy lentamente fuera del div, la paginación deslizante básicamente se mostrará para siempre a menos que mueve el cursor rapido...
¿Algúna idea de cómo arreglar esto?
Codepen para referencia
$(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>no estableciste la posición para .media-slider-wrap
.media-slider-wrap { /* margin: 100px; */ position: relative; width: fit-content; /* make it work with firefox */ width: -moz-fit-content; }Modifiqué su código de codepen, que creo que está inspirado en ¿Por qué el elemento no desaparece cuando el mouse sale del área? , Ahora funciona.
$(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>El problema es que su elemento ".slider-paging" está viajando con su cursor, lo que hace que la función mouseleave no se ejecute. Debe asegurarse de que su elemento ".slider-paging" se desplace hasta el límite del cuadro rojo. Haga que la top e left de su ".slider-paging" con el límite del rectángulo.
Condición: La posición izquierda debe moverse desde el extremo izquierdo del rectángulo hasta el extremo derecho del rectángulo. De manera similar, la posición superior debe moverse desde el extremo superior hasta el extremo inferior.
Aquí está la solución que hice.
$(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>