反应 onMouseOver 不起作用，如果只触发一次

Question

我想激发与 css ':hover' 相同的效果。 我试过这些方法：

onMouseOver, onMouseEnter, onMouseMove

例子：

function example() {

return (
    <h1 onMouseOver={(e)=>{console.log(e.target)}}> hello </h1>
    )
}

但我注意到它仅在我单击元素时才会触发并且不会连续执行。 我希望在 css 中具有相同的 es ':hover' 效果，当元素悬停时会连续触发。 我错过了什么？

Answer 1

我复制了相同的代码并将其粘贴到 vscode 中，它在移动设备中无法使用，但在点击时（因为移动设备中没有 hover）您可以尝试：

<h1 onMouseOver={(e)=>console.log(e.target)}> hello </h1>

代替：

<h1 onMouseOver={(e)=>{console.log(e.target)}}> hello </h1>

但有两种工作方式

Answer 2

我刚刚和你做了同样的例子，它正在工作。 你应该检查你的代码并弄清楚。

// 这是我的代码

function example() {
 return <h1 onMouseOver={(e) => console.log(e.target)}>Hello </h1>;
}

export default example;

Answer 3

这个问题可以改进。 但是，我在这里发布答案。 你可以使用isHovered的值来做一些事情：

function example() {
    const [isHovered, setIsHovered] = useState(false)
    return (
       <h1
          onMouseEnter={() => setIsHovered(true)}
          onMouseLeave={() => setIsHovered(false)}
       > hello </h1>
    )
}