Listado completo de tutoriales

Eventos: mouseover y mouseout

El evento mouseover se dispara cuando ingresamos con la flecha del mouse a un control HTML que tiene registrado dicho evento, y mouseout se dispara cuando sacamos la flecha del mouse del control.

Es muy común utilizar estos dos eventos para producir cambios en el elemento HTML cuando ingresamos la flecha del mouse y retornar al estado anterior cuando se saca la flecha del mouse.

Es importante hacer notar que estos eventos se disparan sin tener que presionar la flecha del mouse, solo con desplazarla al interior del elemento HTML se dispara el evento mouseover.

Implementaremos un pequeño ejemplo que muestre un cuadrado, el mismo mostrará los bordes redondeados cuando ingresemos la flecha del mouse en su interior y volverá al estado anterior cuando retiremos la flecha.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <div style="width:200px;height:200px;background:#0000ff" id="recuadro1">
    </div>

    <script>
        document.getElementById('recuadro1').addEventListener('mouseover', entrada);
        document.getElementById('recuadro1').addEventListener('mouseout', salida);

        function entrada() {
            document.getElementById('recuadro1').style.borderRadius = '30px';
        }

        function salida() {
            document.getElementById('recuadro1').style.borderRadius = '0px';
        }
    </script>

</body>

</html>

Definimos en el HTML un div de color azul de 200 píxeles de lado:

<div style="width:200px;height:200px;background:#0000ff" id="recuadro1">
</div>

Registramos los eventos mouseover y mouseout:

        document.getElementById('recuadro1').addEventListener('mouseover', entrada);
        document.getElementById('recuadro1').addEventListener('mouseout', salida);

El método entrada se ejecuta cuando ingresemos la flecha del mouse en el div llamado recuadro1 y procedemos en el mismo a modificar la propiedad borderRadius del estilo de este elemento (indicamos que el redondeo de los vértices del div sea de 30 píxeles):

        function entrada() {
            document.getElementById('recuadro1').style.borderRadius = '30px';
        }

Cuando sale la flecha del mouse del div se ejecuta la función salida donde fijamos con 0 la propiedad borderRadius:

        function salida() {
            document.getElementById('recuadro1').style.borderRadius = '0px';
        }

Retornar