Textblock following mousepointer-CodePudding

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 >
            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.

CodePudding user response：

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 >
          Just some example text
      </div>
  </div>
</main>

CSS

#slider-block {
  position: relative;
  overflow: hidden;
}

.my-text {
  position: absolute;
}

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';
        }
    );

}

CodePudding user response：

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 >
      Just some example text
    </div>
  </div>
</main>

This just leaves the text at its final place.