用ReactJs中的MouseMove事件监听器改变样式

Question

我想在react js中移动我的鼠标光标，并在它与我的字符一致后应用一些样式，例如!在我的情况下，我希望它适用于我的信Z!!

<span className='letterZ animate__animated animate__zoomIn delay1'>Z</span>
const [MousePosition, setMousePosition] = useState({
left: 0,
top: 0
})
function handleMouseMove(ev) {
setMousePosition({
left: ev.pageX,
top: ev.pageY
});
}

所以我在我的部分的最后一部分定义了一个光标div !!下面是代码

<div className="cursor" onMouseMove={handleMouseMove} style={{left:MousePosition.left , top: MousePosition.top
}}></div>

但是当我显示我的内容时divcursor被堆叠在上面的屏幕上因为默认情况下我的状态设置为左0和上0

这是我的代码CSS

.cursor{
position: fixed;
width:20px;
height:20px;
border-radius:50%;
background:#fff;
transition:0.1s;
transform:translate(-50%,-50%);
pointer-events:none;
mix-blend-mode: difference;
}
.letterZ:hover ~.cursor{
transform:scale(6)
}

Answer 1

const [MousePosition, setMousePosition] = useState({
left: 0,
top: 0
})
const cursor = document.querySelector(".cursor")
cursor.onmousemove = function(event) {
setMousePosition({
left: event.pageX,
top: event.pageY
});
}
<div className="cursor" style={{left:MousePosition.left , top: MousePosition.top
}}></div>