如何使div仅在悬停在框上时跟随鼠标指针？

Question

我是个初学者，有人能帮我吗。当您将鼠标悬停在其中一个框上时，我希望div class="title"跟随该框内的光标。香草js溶液。看看这里的图片。这是迄今为止的代码：

const thumbs = document.querySelectorAll(".container .thumb");
const title = document.querySelector(".thumb .title")
function divMoves() {
title.addEventListener("mousemove", function(e) {
let x = e.offsetX + "px";
let y = e.offsetY + "px";
title.style.top = x;
title.style.left = y;
})
};
thumbs.forEach(thumb => {
thumb.addEventListener("mouseover", divMoves);
thumb.addEventListener("mouseleave");
});

Answer 1

您不需要在title上使用mousemove事件，而是在希望标题悬停在其上的元素上使用。您可以使用pageX和pageY属性来获取文档上指针的坐标，并将这些值应用于title元素的left和top属性

const thumbs = document.querySelectorAll(".box");
const title = document.querySelectorAll(".title")
const onMouseMove = (e, i) => {
title[i].style.left = e.pageX + 'px';
title[i].style.top = e.pageY + 'px';
}
thumbs.forEach((thumb, i) => {
thumb.addEventListener("mousemove", (e) => onMouseMove(e, i));
});

点击此处查看样品