El Atributo ONMOUSEOUT

Es un evento HTML que se dispara cuando el cursor del mouse abandona un elemento.

El atributo onmouseout es un evento HTML que se dispara cuando el cursor del mouse abandona un elemento. Es útil para revertir cambios o limpiar interacciones al finalizar la acción del usuario.

Sintaxis Básica

<elemento onmouseout="funcion()">

  • elemento: Cualquier elemento HTML (divs, botones, imágenes).

  • funcion(): Acción a ejecutar al salir del área del elemento.

Ejemplos Prácticos

Ejemplo 1: Restaurar transformación CSS

<div onmouseover="this.style.transform = 'rotate(15deg)'"
    onmouseout="this.style.transform = 'rotate(0)'"
>
    ¡Inténtalo!
</div>

Efecto: Gira el elemento al pasar el mouse y lo restaura al salir.

Ejemplo 2: Ocultar tooltip dinámico

function ocultarTooltip() {
    document.getElementById("tooltip").style.display = "none";
}

Uso: Combinado con onmouseover para mostrar información contextual.

Ejemplo 3: Resetear estado de imagen

<img onmouseover="this.style.opacity = '0.8'" 
    onmouseout="this.style.opacity = '1'"
>

Aplicación: Mejora la experiencia visual en galerías.

Ejemplo 4: Menú desplegable inteligente

// Retraso para evitar cierre accidental
elemento.onmouseout = () => {
    setTimeout(() => {
        // Código para ocultar menú
    }, 200);
};

Buena práctica: Usar retrasos para interacciones fluidas.

Diferencias Clave

onmouseout vs onmouseleave:

onmouseout se dispara al salir del elemento o de sus hijos, mientras que onmouseleave solo al salir del elemento principal.

Buenas Prácticas

  1. Combina con onmouseover: Para crear ciclos completos de interacción.

  2. Evita parpadeos: Usa setTimeout para estabilizar transiciones.

  3. Accesibilidad:
    Implementa alternativas con teclado (onfocus/onblur).

Casos de Uso Comunes

  • Restaurar estados visuales (colores, sombras).

  • Cerrar menús contextuales.

  • Detener animaciones automáticas.

  • Limpiar selecciones temporales.

Compatibilidad

Todos los navegadores modernos (incluyendo móviles con soporte táctil limitado).

Alternativa moderna:

elemento.addEventListener('mouseout', funcion);

Conclusión

El atributo onmouseout es esencial para crear experiencias pulidas y profesionales. Al dominarlo junto con otros eventos del mouse, podrás desarrollar interfaces más intuitivas y responsivas.

 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tutorial: Uso del atributo "onmouseout" en HTML</title>
    <style>
        .caja {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            margin: 20px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .tooltip {
            position: absolute;
            background: #2c3e50;
            color: white;
            padding: 8px;
            border-radius: 4px;
            display: none;
        }
        .menu-desplegable {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            background-color: #e74c3c;
            color: white;
        }
        .contenido-menu {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <h1>Tutorial del atributo <code>onmouseout</code></h1>

    <!-- Ejemplo 1: Cambio de color básico -->
    <h2>1. Restaurar estado al salir</h2>
    <div 
        class="caja"
        onmouseover="this.style.transform = 'scale(1.2)'"
        onmouseout="this.style.transform = 'scale(1)'"
    >
        Pasa el mouse
    </div>

    <!-- Ejemplo 2: Tooltip interactivo -->
    <h2>2. Tooltip que desaparece al salir</h2>
    <button 
        id="botonInfo"
        onmouseover="mostrarTooltip(event)"
        onmouseout="ocultarTooltip()"
    >
        Ver información
    </button>
    <div id="tooltip" class="tooltip">¡Funcionalidad importante!</div>

    <!-- Ejemplo 3: Efecto en imágenes -->
    <h2>3. Resetear imagen al retirar el mouse</h2>
    <img 
        src="https://via.placeholder.com/300" 
        alt="Ejemplo"
        onmouseover="this.style.filter = 'brightness(1.2)'"
        onmouseout="this.style.filter = 'brightness(1)'"
        style="transition: filter 0.3s;"
    >

    <!-- Ejemplo 4: Menú desplegable -->
    <h2>4. Menú que se cierra automáticamente</h2>
    <div class="menu-desplegable" 
         onmouseover="document.getElementById('menu').style.display = 'block'"
         onmouseout="document.getElementById('menu').style.display = 'none'">
        Menú
        <div id="menu" class="contenido-menu">
            <a href="#">Opción 1</a>
            <a href="#">Opción 2</a>
            <a href="#">Opción 3</a>
        </div>
    </div>

    <script>
        // Ejemplo 2: Tooltip
        function mostrarTooltip(e) {
            const tooltip = document.getElementById("tooltip");
            tooltip.style.display = "block";
            tooltip.style.left = `${e.clientX + 15}px`;
            tooltip.style.top = `${e.clientY + 15}px`;
        }

        function ocultarTooltip() {
            document.getElementById("tooltip").style.display = "none";
        }

        // Ejemplo 4: Mejora para evitar cierre accidental
        let timeoutMenu;
        document.getElementById("menu").onmouseover = () => {
            clearTimeout(timeoutMenu);
        };
        document.getElementById("menu").onmouseout = () => {
            timeoutMenu = setTimeout(() => {
                document.getElementById("menu").style.display = "none";
            }, 300);
        };
    </script>
</body>
</html>

 

<!-- Ejemplo Final: Tarjeta interactiva -->
<div class="tarjeta" 
     onmouseover="this.classList.add('elevada')" 
     onmouseout="this.classList.remove('elevada')">
    <h3>Título</h3>
    <p>Contenido de la tarjeta...</p>
</div>

<style>
    .tarjeta {
        transition: transform 0.3s, box-shadow 0.3s;
    }
    .elevada {
        transform: translateY(-10px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }
</style>