1

A ver, me explico: Me gustaria crear un detector de cuando el cursor toca un elemento, pero el .onmousemove() es muy impreciso y quiero algo mas rapido, y se me ocurria usar el :hover de CSS, pero no se como (si es que se puede) conectar codigo JavaScript al activarse el :hover ¿Hay alguna forma?

Por ejemplo:

#elemento {
    /* ejecutarcodigojs */ 
}

¿Se podria llegar a hacer? O cualquier alternativa mas precisa al .onmousemove() me sirve tambien

Gracias.

2
  • Si estas usando jquery utiliza el .hover() que se ejecuta al momento de hacer hover a un elemento. Commented el 1 jul. 2022 a las 18:54
  • Gracias por la sugerencia pero no lo estoy usando Commented el 1 jul. 2022 a las 21:24

1 respuesta 1

2

No, no se puede, pero el mismo evento que aplica un estilo CSS sobre un elemento, se puede escuchar para ejecutar javascript. El nombre cambia, mientras en CSS es hover, en javascript el evento se llama mouseover:

document.querySelector('div').addEventListener('mouseover', () => console.log('Ratón sobre el div'))
div#hover {
  width: 200px;
  padding: 10px;
}
div:hover {
  background-color: navy;
  color: white;
}
<div id="hover"> Pon el ratón encima </div>

5
  • Entiendo pero no se si tiene que ver, pero estoy usando la propiedad cursor: none; y no es totalmente preciso, si paso muy rapido el cursor no pasa nada (hice que cuando se pase el cursor muestre un alert(), estoy haciendo un juego, por eso necesito mucha precision) Commented el 1 jul. 2022 a las 21:23
  • Si mueves demasiado rápido el cursor es posible que entre dos refrescos de pantalla el cursor haya cruzado todo el elemento y, por tanto, no se registre que en algún momento haya estado encima de dicho elemento. En ese caso tendrías que interpolar las coordenadas y comprobar si ha debido pasar por encima Commented el 1 jul. 2022 a las 21:26
  • Gracias por la información, y si no es mucho pedir, ¿Cómo haría eso? ¿algún tutorial o código? Commented el 1 jul. 2022 a las 21:28
  • Quizá esta otra pregunta/respuesta te ayude, aquí se calculan las posiciones por las que debe haber pasado el cursor para "suavizar" las líneas trazadas: es.stackoverflow.com/questions/436412/… Commented el 1 jul. 2022 a las 21:31
  • Muchas gracias :D Commented el 1 jul. 2022 a las 21:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.