react onMouseOver not working and if does fires only one time-CodePudding

I want to stimulate an effect same as css ':hover'. I've tried these methods:

onMouseOver, onMouseEnter, onMouseMove

example:

function example() {

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

but I've noticed that it fires only when I click the element and doesn't do it continuously. I want an effect same es ':hover' in css that fires continously when an element is hovered. What am I missing?

CodePudding user response：

i copied the same code and pasted it in vscode and it worked in mobile not working but on click (because there is no hover in mobile) you can try:

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

instead of:

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

but the two ways working

CodePudding user response：

I just made same example with you and it is working. You should checkout your code and figure it out.

// This is my code

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

export default example;

CodePudding user response：

This question can be improved. However, I'm posting an answer here. You can use the value of isHovered to do something:

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