Efecto CSS :hover

En CSS, :hover es una pseudo-clase que define los estilos que se aplican cuando el cursor del mouse pasa sobre un elemento HTML.

Se utiliza para añadir interacción con el usuario, proporcionar retroalimentación visual y mejorar la experiencia de usuario (UX).

Casos de uso comunes de la propiedad :hover

• Diseños de menús desplegables (dropdown)
• Resaltar enlaces y botones
• Efectos de zoom/opacidad en imágenes
• Animaciones de fondo o borde
• Interacción en campos de formulario

Uso básico de :hover

En el ejemplo siguiente, cuando el cursor del mouse pasa sobre el texto “Basic :hover Usage”, el color del enlace cambia.

a {
  color: #333;
  text-decoration: none;
}
a:hover {
  color: #007bff;
  text-decoration: underline;
}

Vista previa

Transición de fondo al pasar el cursor sobre el botón

button {
  background-color: #ff5722;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #1362eb;
}

Al utilizar la propiedad transition en CSS, se puede ampliar la duración del cambio de color, creando un efecto de transición más suave.

Efecto de zoom en la imagen

<style>
.card {
    padding: 20px;
    border: 1px solid #ccc;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.card-text {
    color: #333;
    transition: color 0.3s ease;
}

.card:hover .card-text {
    color: #e91e63;
}

</style>

<div class="card">
    <h3>Card Title</h3>
    <p class="card-text">The color of this text will change on hover.</p>
</div>

Con el selector .card:hover .card-text, solo el elemento .card-text dentro de la tarjeta se ve afectado cuando se pasa el cursor sobre la tarjeta. Este método puede usarse para el fondo, el tamaño, la opacidad y cualquier otro estilo.

Menú desplegable con :hover

<style>
.hover-test-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hover-test-menu > li {
    position: relative;
    background: #3498db;
    color: white;
    padding: 10px;
    cursor: pointer;
    width: 150px;
}

/* The submenu is initially hidden. */
.hover-test-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #2980b9;
    width: 150px;
}

.hover-test-submenu li {
    padding: 10px;
    color: white;
}

/* Show the submenu on hover. */
.hover-test-menu > li:hover .hover-test-submenu {
    display: block;
}
</style>
<ul class="hover-test-menu">
    <li>
        Main Menu
        <ul class="hover-test-submenu">
            <li>Sub Menu 1</li>
            <li>Sub Menu 2</li>
            <li>Sub Menu 3</li>
        </ul>
    </li>
</ul>

• Main Menü
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3

Cosas a tener en cuenta al usar :hover

• Retroalimentación al usuario: Los efectos hover deben aplicarse siempre en elementos que sean clicables.
• Transiciones suaves: Usa la propiedad transition para suavizar los efectos.
• Rendimiento: Animaciones demasiado complejas pueden afectar el rendimiento del navegador.
• Visibilidad: Los cambios con hover deben ser visualmente notorios; por ejemplo, presta atención al contraste en las transiciones de color.

¿Funciona :hover en dispositivos móviles (táctiles)?

:hover no funciona en dispositivos móviles.