I want a piece of text to follow the mousepointer, but only when the mouse is hovering over an image. Until now it works partly: when the mouse accesses the image-area, the textblock jumps to the mousepointer, and remains attached to it. But unfortunately when the mouse leaves the image-area again, the text remains attached to the mouse and follows the mousepointer wherever the mouse is going. Instead it should go back to its starting position.
The relevant html:
<main id="landing">
<div id='slider-block'>
<img id='slider' class='my-image' src="img/my-image.jpg">
<div class="my-text">
Just some example text
</div>
</div>
</main>
And the relevant CSS:
#slider-block {
background-color: orange;
}
.my-image {
background-color: red;
padding: 30px;
width: 50%;
height: auto;
}
.my-text {
position: absolute;
top: 120px;
left: 120px;
width: 20%;
}
And the .js content:
let sliderbody = document.querySelector('#slider');
sliderbody.onmouseover = function () {
document.addEventListener('mousemove', function (e) {
let titleblock = document.getElementsByClassName('my-text')[0];
titleblock.style.left = e.clientX + 'px';
titleblock.style.top = e.clientY + 'px';
}
);
}
So the question is how to end the text following the mousepointer when the mouse leaves the slider-image.
Let me know if that fulfills your requirements:
HTML
<main id="landing">
<div id='slider-block'>
<img id='slider' width="500" class='my-image' src="https://images.unsplash.com/photo-1541363111435-5c1b7d867904?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZHVtbXl8ZW58MHx8MHx8&w=1000&q=80">
<div class="my-text">
Just some example text
</div>
</div>
</main>
CSS
#slider-block {
position: relative;
overflow: hidden;
}
.my-text {
position: absolute;
}
JS
let sliderbody = document.querySelector('#slider');
sliderbody.onmouseover = function () {
document.addEventListener('mousemove', function (e) {
let titleblock = document.getElementsByClassName('my-text')[0];
console.log(titleblock);
titleblock.style.left = e.clientX + 'px';
titleblock.style.top = e.clientY + 'px';
}
);
}
As a very simplistic solution you could just sense when the mouse leaves the image and at that point remove the eventlistener so the x and y do not get updated.
let sliderbody = document.querySelector('#slider');
function mousemoved(e) {
let titleblock = document.getElementsByClassName('my-text')[0];
titleblock.style.left = e.clientX + 'px';
titleblock.style.top = e.clientY + 'px';
}
sliderbody.onmouseover = function() {
document.addEventListener('mousemove', mousemoved);
}
sliderbody.onmouseout = function() {
document.removeEventListener('mousemove', mousemoved);
}#slider-block {
background-color: orange;
}
.my-image {
background-color: red;
padding: 30px;
width: 50%;
height: auto;
}
.my-text {
position: absolute;
top: 120px;
left: 120px;
width: 20%;
}
.my-text.follow {}<main id="landing">
<div id='slider-block'>
<img id='slider' class='my-image' src="img/my-image.jpg">
<div class="my-text">
Just some example text
</div>
</div>
</main>This just leaves the text at its final place.