When I move the cursor inside of the media-slider-wrap the slider-paging follows the cursor, which is what I want. But when the mouse leaves the media-slider-wrap the slider-paging should disappear straight away, instead it keeps following the mouse.. If you move the cursor really slow out of the div then the slider-paging will basically show forever unless you move the cursor fast...
Any idea how to fix this?
Codepen for reference
$(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>you didn't set position for .media-slider-wrap
.media-slider-wrap {
/* margin: 100px; */
position: relative;
width: fit-content;
/* make it work with firefox */
width: -moz-fit-content;
}
I modified your code from codepen, which I think is inspired from Why is the element not disappearing when mouse leaves area?, It works now.
$(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>The issue is your ".slider-paging" element is travellling with your cursor, which makes the mouseleave function fail to execute. You have to ensure that your ".slider-paging" element travells upto your red box boundary. Make the top and left of your ".slider-paging" limit to the boundary of rectangle.
Condition: The left position should move from the left end of rectangle to the right end of rectangle. Similarly the top position should move from top end to the bottom end.
Here is the fix that I made.
$(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>