Hazlo Sentir Vivo

Los estados de hover le dicen al usuario "esto es interactivo." Un botón que cambia al pasar el cursor invita a hacer clic. Una tarjeta que se eleva sugiere que lleva a algún lado. Estas micro-interacciones hacen que las aplicaciones se sientan responsivas y profesionales.

Lo Que Aprenderás

Crear estados de hover efectivos
Usar transiciones para efectos suaves
Aplicar transformaciones para profundidad visual
Manejar estados de foco para accesibilidad

Los Fundamentos del Hover

La pseudo-clase :hover aplica estilos cuando el cursor está sobre un elemento:

.card {
  background: white;
  border: 1px solid #e5e7eb;
}

.card:hover {
  border-color: #3b82f6;
}

Pero los cambios abruptos se sienten bruscos. Agrega transiciones:

.card {
  background: white;
  border: 1px solid #e5e7eb;
  transition: border-color 0.2s ease;
}

.card:hover {
  border-color: #3b82f6;
}

Ahora el color del borde cambia suavemente en 0.2 segundos.

Propiedades de Transición

Controla qué se anima y cómo:

/* Specific property */
transition: background-color 0.2s ease;

/* Multiple properties */
transition: background-color 0.2s ease, transform 0.2s ease;

/* All properties (use carefully) */
transition: all 0.2s ease;

/* Different timing for different properties */
transition: 
  background-color 0.15s ease,
  transform 0.3s ease-out,
  box-shadow 0.2s ease;

Funciones de temporización comunes:

ease — Empieza lento, acelera, desacelera
ease-in — Empieza lento
ease-out — Termina lento
ease-in-out — Inicio y fin lentos
linear — Velocidad constante

Estados de Hover en Botones

Haz que los botones se sientan clicables:

.btn {
  padding: 0.75rem 1.5rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn:hover {
  background: #2563eb;
}

.btn:active {
  transform: scale(0.98);
}

El estado :active da retroalimentación durante el clic — una escala sutil crea un efecto de "presión".

Efectos de Hover en Tarjetas

Eleva las tarjetas para sugerir que son clicables:

.service-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  transition: 
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.service-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

La tarjeta se eleva (translateY), gana profundidad de sombra y resalta su borde.

Efectos de Hover en Imágenes

Aplica zoom a las imágenes al pasar el cursor para mayor interés visual:

.card-image {
  overflow: hidden;
  border-radius: 8px;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card:hover .card-image img {
  transform: scale(1.05);
}

Nota: El hover está en el elemento padre .card, pero el efecto está en el img anidado. Esto crea una experiencia más accesible.

Estados de Hover en Enlaces

Haz que los enlaces sean claramente interactivos:

.nav-link {
  color: #4b5563;
  text-decoration: none;
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.15s ease;
}

.nav-link:hover {
  color: #3b82f6;
}

/* Animated underline */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #3b82f6;
  transition: width 0.2s ease;
}

.nav-link:hover::after {
  width: 100%;
}

El subrayado se desliza desde la izquierda al pasar el cursor.

Estados de Foco para Accesibilidad

No olvides a los usuarios de teclado. Los estados de foco deben ser visibles:

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

/* Modern approach: visible only for keyboard */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

:focus-visible solo se muestra para la navegación por teclado, no para clics del mouse. Esto mantiene la interfaz limpia sin sacrificar la accesibilidad.

Aplicar a los Componentes de BookIt

Hover en ServiceCard

<!-- filename: src/lib/components/ServiceCard.svelte -->
<style>
  .card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: 
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }
  
  .card:hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
  
  .card-image img {
    transition: transform 0.3s ease;
  }
  
  .card:hover .card-image img {
    transform: scale(1.05);
  }
  
  .card-title a {
    color: #1f2937;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  
  .card-title a:hover {
    color: #3b82f6;
  }
</style>

Hover en Navegación

<!-- filename: src/lib/components/Header.svelte -->
<style>
  nav a {
    color: #4b5563;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  
  nav a:hover {
    background: #f3f4f6;
    color: #1f2937;
  }
  
  nav a.active {
    background: #eff6ff;
    color: #3b82f6;
  }
</style>

Hover en la Insignia de Precio

<!-- filename: src/lib/components/PriceBadge.svelte -->
<style>
  .price {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #eff6ff;
    color: #3b82f6;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.15s ease;
  }
  
  .price:hover {
    background: #dbeafe;
  }
</style>

Lineamientos para Estados de Hover

Sí:

Usa efectos sutiles (no exageres)
Mantén las transiciones cortas (0.15s - 0.3s)
Relaciona el hover con el propósito del elemento
Incluye estados de foco para accesibilidad

No:

Hagas efectos de hover demasiado dramáticos
Olvides agregar transiciones (los cambios abruptos se sienten rotos)
Uses hover para información esencial (los dispositivos táctiles no pueden hacer hover)
Elimines los contornos de foco sin alternativas

Consideraciones para Dispositivos Táctiles

El hover no existe en dispositivos táctiles. No dependas de él para interacciones críticas:

/* This info is only visible on hover — bad! */
.card .details {
  opacity: 0;
}
.card:hover .details {
  opacity: 1;
}

Mejor: Muestra la información por defecto, o usa un toque/clic para revelarla.

Para efectos que son puramente decorativos, el hover está bien — simplemente no aparecerán en dispositivos táctiles.

Errores Comunes

Demasiado Movimiento

/* ❌ Too dramatic */
.card:hover {
  transform: scale(1.2) rotate(5deg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* ✅ Subtle and professional */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

Transiciones Faltantes

/* ❌ Abrupt change */
.btn:hover {
  background: #2563eb;
}

/* ✅ Smooth transition */
.btn {
  transition: background-color 0.15s ease;
}
.btn:hover {
  background: #2563eb;
}

Olvidar a los Usuarios de Teclado

/* ❌ Only hover, no focus */
.btn:hover {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

/* ✅ Both hover and focus */
.btn:hover,
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

Resumen

Los estados hover hacen que las interfaces se sientan responsivas. Usa transiciones para efectos suaves, mantén los movimientos sutiles y siempre incluye estados de foco para la accesibilidad. El objetivo es dar retroalimentación, no distraer.

Puntos clave:

Agrega transition antes de los estilos :hover
Mantén los efectos sutiles (0.15s-0.3s, transformaciones pequeñas)
Incluye :focus-visible para usuarios de teclado
No ocultes información esencial detrás del hover

Próximos Pasos

Los estilos de componentes tienen alcance limitado, pero algunos estilos necesitan ser globales. Continúa con Estilos Globales para configurar tipografía, colores y estilos base para todo BookIt.