cuando paso el cursor por la imagen cuando devtools no se enciende, no funciona, pero cuando abro cuando devtools y paso el mouse de nuevo. Finalmente funciono?? He estado intentando en un navegador diferente pero ocurre el mismo problema, todos me ayudan a resolver esto. Ocurrió cuando usé setTimeout y clearTimeout en la función de diferencia, sería bueno si pudiera ayudar a resolver esto o la idea de escribir código de diferentes maneras.
const handleHover = () => { //set time out here setHandleDelay(setTimeout(() => { setHover(true) }, 1000 )) } const handleNotHover = () => { //i want to clear time out here when it not hover clearTimeout(handleDelay) setHover(false) } return ( <div key={movie.id} onMouseOver={() => handleHover()} onmouseover{() => handleNotHover()}> <div>...</div> )Gracias a todos, ya he encontrado la solución. Es estúpido de mi parte por error en el evento onMouseOver y onMouseEnter.
Era mejor usar onMouseEnter y onMouseLeave cuando pasas el mouse sobre un elemento en Reactjs
<div onMouseEnter={() => handleHover()} onMouseLeave={() => handleNotHover()} />