Evento al pasar el ratón
Ejemplo
Ejecute un JavaScript al mover el puntero del mouse sobre una imagen:
<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El evento onmouseover ocurre cuando el puntero del mouse se mueve sobre un elemento o sobre uno de sus elementos secundarios.
Sugerencia: este evento a menudo se usa junto con el evento onmouseout , que ocurre cuando un usuario mueve el puntero del mouse fuera de un elemento.
Compatibilidad con navegador
| Event | |||||
|---|---|---|---|---|---|
| onmouseover | Yes | Yes | Yes | Yes | Yes |
Sintaxis
En HTML:
<element onmouseover="myScript">
En JavaScript:
object.onmouseover = function(){myScript};
En JavaScript, usando el método addEventListener():
object.addEventListener("mouseover", myScript);
Nota: el método addEventListener() no es compatible con Internet Explorer 8 y versiones anteriores.
Detalles técnicos
| Burbujas: | sí |
|---|---|
| Cancelable: | sí |
| Tipo de evento: | RatónEvento |
| Etiquetas HTML compatibles: | Todos los elementos HTML, EXCEPTO: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title> |
| Versión DOM: | Eventos de nivel 2 |
Más ejemplos
Ejemplo
Este ejemplo demuestra la diferencia entre los eventos onmouseemove, onmouseenter y mouseover:
<div onmousemove="myMoveFunction()">
<p id="demo">I will demonstrate onmousemove!</p>
</div>
<div onmouseenter="myEnterFunction()">
<p id="demo2">I will demonstrate onmouseenter!</p>
</div>
<div onmouseover="myOverFunction()">
<p id="demo3">I will demonstrate onmouseover!</p>
</div>