El Atributo ONMOUSEOVER

Es un evento HTML que se activa cuando el cursor del mouse entra en el área de un elemento.

El atributo onmouseover es un evento HTML que se activa cuando el cursor del mouse entra en el área de un elemento. Es fundamental para crear interacciones dinámicas como efectos visuales, menús contextuales y sistemas de información emergente.

Sintaxis Básica

<elemento onmouseover="funcion()">

elemento: Cualquier elemento HTML (divs, imágenes, botones)
funcion(): Código JavaScript a ejecutar (puede incluir el objeto event)

Ejemplos Prácticos

Ejemplo 1: Transformación visual básica

<div 
    onmouseover="this.style.boxShadow = '0 8px 16px rgba(0,0,0,0.2)'"
    onmouseout="this.style.boxShadow = 'none'"
>
    ¡Interactúa conmigo!
</div>

Efecto: Crea una sombra suave al pasar el mouse.

Ejemplo 2: Sistema de tooltips avanzado

function mostrarTooltipDetallado(evento) {
    const tooltip = crearTooltipPersonalizado();
    tooltip.style.left = `${evento.pageX}px`;
    tooltip.style.top = `${evento.pageY}px`;
    tooltip.innerHTML = "<strong>Detalles:</strong> Información extendida...";
}

Mejora: Posicionamiento preciso y contenido HTML dinámico.

Ejemplo 3: Galería de imágenes interactiva

<img 
    src="imagen.jpg"
    onmouseover="this.style.transform = 'rotate(5deg)'"
    onmouseout="this.style.transform = 'rotate(0)'"
    style="transition: all 0.4s;"
>

Efecto: Ligera rotación al pasar el mouse.

Ejemplo 4: Menú desplegable con retardo

elemento.onmouseover = () => {
    clearTimeout(timeoutMenu);
    menu.style.display = 'block';
};

Buena práctica: Evita el parpadeo con gestión de tiempos.

Diferencias Clave

`onmouseover` vs `onmouseenter`:

onmouseover: Se dispara al entrar al elemento o a cualquiera de sus hijos.
onmouseenter: Solo se activa al entrar al elemento principal.

Buenas Prácticas

Optimiza el rendimiento:

elemento.onmouseover = () => {
    requestAnimationFrame(() => {
        // Animaciones complejas aquí
    });
};

Accesibilidad:

Implementa equivalentes para teclado (onfocus).
Usa ARIA roles para elementos interactivos.

Evita efectos molestos:

Limita animaciones excesivas.
Proporciona controles para desactivar efectos.

Casos de Uso Avanzados

Pre-carga de recursos:

<div onmouseover="precargarImagenesGaleria()"></div>

Sistemas de rating estelar:

estrellas.forEach((estrella, index) => {
    estrella.onmouseover = () => resaltarEstrellas(index);
});

Juegos de navegador:

areaJuego.onmouseover = () => iniciarTemporizador();

Compatibilidad

Soporte universal: Todos los navegadores modernos

Alternativa moderna:

elemento.addEventListener('mouseover', funcion);

Conclusión

El atributo onmouseover es una herramienta poderosa para crear experiencias web interactivas y atractivas. Al combinarlo con transiciones CSS y otras API de JavaScript, puedes desarrollar desde micro-interacciones hasta interfaces complejas.

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

    <!-- Ejemplo 1: Cambio básico de estilo -->
    <h2>1. Efecto hover básico</h2>
    <div 
        class="caja-interactiva"
        onmouseover="this.style.transform = 'scale(1.1)'; this.style.backgroundColor = '#2980b9'"
        onmouseout="this.style.transform = 'scale(1)'; this.style.backgroundColor = '#3498db'"
    >
        Pasa el mouse
    </div>

    <!-- Ejemplo 2: Tooltip informativo -->
    <h2>2. Tooltip dinámico</h2>
    <button 
        id="botonEspecial"
        onmouseover="mostrarTooltip(event, '¡Esta es una función premium!')"
        onmouseout="ocultarTooltip()"
    >
        Ver detalles
    </button>
    <div id="tooltip" class="tooltip"></div>

    <!-- Ejemplo 3: Galería interactiva -->
    <h2>3. Efecto zoom en imágenes</h2>
    <div class="galeria-imagenes">
        <img 
            src="https://via.placeholder.com/300x200" 
            alt="Imagen interactiva"
            onmouseover="this.style.transform = 'scale(1.2)'"
            onmouseout="this.style.transform = 'scale(1)'"
            style="transition: transform 0.3s; width: 100%; height: 100%; object-fit: cover;"
        >
    </div>

    <!-- Ejemplo 4: Menú contextual -->
    <h2>4. Menú desplegable</h2>
    <div class="menu-desplegable" 
         onmouseover="document.getElementById('opciones').style.display = 'block'"
         onmouseout="document.getElementById('opciones').style.display = 'none'">
        Acciones
        <div id="opciones" class="opciones-menu">
            <p style="margin: 10px; color: #333;">Editar perfil</p>
            <p style="margin: 10px; color: #333;">Configuración</p>
            <p style="margin: 10px; color: #333;">Cerrar sesión</p>
        </div>
    </div>

    <script>
        // Ejemplo 2: Sistema de tooltips
        function mostrarTooltip(evento, mensaje) {
            const tooltip = document.getElementById("tooltip");
            tooltip.textContent = mensaje;
            tooltip.style.display = "block";
            tooltip.style.left = `${evento.clientX + 15}px`;
            tooltip.style.top = `${evento.clientY + 15}px`;
        }

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

        // Ejemplo 4: Mejora de menú desplegable
        let timeoutMenu;
        document.getElementById("opciones").onmouseover = () => {
            clearTimeout(timeoutMenu);
        };
        document.getElementById("opciones").onmouseout = () => {
            timeoutMenu = setTimeout(() => {
                document.getElementById("opciones").style.display = "none";
            }, 300);
        };
    </script>
</body>
</html>

<!-- Ejemplo Final: Tarjeta de perfil interactiva -->
<div class="tarjeta-perfil" 
     onmouseover="mostrarInfoExtra()"
     onmouseout="ocultarInfoExtra()">
    <img src="avatar.jpg" alt="Avatar">
    <div class="info-extra">
        <h3>Habilidades:</h3>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </div>
</div>

<style>
    .info-extra {
        opacity: 0;
        transition: opacity 0.3s;
    }
    .tarjeta-perfil:hover .info-extra {
        opacity: 1;
    }
</style>