跟踪鼠标指针

Question

我想要一段文字跟随鼠标指针，但只有当鼠标悬停在图像上时。直到现在，它的部分工作:当鼠标访问图像区域，文本块跳到鼠标指针，并保持连接到它。但不幸的是，当鼠标再次离开图像区域时，文本仍然附着在鼠标上，并在鼠标指向的地方跟随鼠标指针。相反，它应该回到它的起始位置。

相关的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>

和相关的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%;
} 

.js内容：

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

}

因此，问题是当鼠标离开滑块图像时，如何结束鼠标指针后面的文本。

Answer 1

作为一个非常简单的解决方案，您可以只感知鼠标何时离开图像，然后删除事件侦听器，这样x和y就不会被更新。

​

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>

​

这就把课文放在了最后的位置。

Answer 2

如果满足您的要求，请告诉我：

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

}