Pseudoclases: Hover vs Focus-visible

Explicación

:hover se activa cuando el puntero del ratón pasa por encima del elemento. Es útil para interacciones visuales, pero no aporta accesibilidad a quienes navegan con teclado. :focus-visible se activa cuando el elemento recibe foco y el navegador determina que debe mostrarse (por ejemplo, al navegar con Tab). Así evitamos mostrar bordes innecesarios al hacer clic con ratón, pero damos retroalimentación clara al usar teclado. 
HTML

<div class="wrapper">
  <section class="demo">
    <button class="hover-only">Solo hover</button>
    <button class="focus-visible-only">Solo focus-visible</button>
    <button class="hover-focus">Hover + Focus-visible</button>
  </section>

  <section class="explicacion">
    <h2>Explicación</h2>
    <p><strong>:hover</strong> se activa cuando el puntero del ratón pasa por encima del elemento. Es útil para interacciones visuales, pero no aporta accesibilidad a quienes navegan con teclado.</p>
    <p><strong>:focus-visible</strong> se activa cuando el elemento recibe foco y el navegador determina que debe mostrarse (por ejemplo, al navegar con <kbd>Tab</kbd>). Así evitamos mostrar bordes innecesarios al hacer clic con ratón, pero damos retroalimentación clara al usar teclado.</p>
    <p>La <strong>combinación de ambos</strong> es la mejor práctica: <em>interacción visual con ratón</em> y también <em>accesibilidad con teclado</em>.</p>
    <ul>
      <li><strong>Botón “Solo hover”</strong>: responde al ratón.</li>
      <li><strong>Botón “Solo focus-visible”</strong>: responde al teclado.</li>
      <li><strong>Botón “Hover + Focus-visible”</strong>: responde a ambos casos (la opción más completa).</li>
    </ul>
  </section>
</div>
  
CSS

body {
  font-family: sans-serif;
  line-height: 1.6;
  background: #f5f5f5;
  color: #333;
  margin: 0;
  padding: 0;
}

.wrapper {
  container-type: inline-size;
  margin-inline: clamp(1rem, 5vw, 20rem);
  padding-block: 2rem;
}

.demo {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}

button {
  padding: 1rem 2rem;
  font-size: 1.1rem;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  background: #3498db;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hover-only:hover {
  background: #2980b9;
}

.focus-visible-only:focus-visible {
  outline: none;
  border: 2px solid #e67e22;
  background: #1abc9c;
}

.hover-focus:hover {
  background: #2980b9;
}

.hover-focus:focus-visible {
  outline: none;
  border: 2px solid #e67e22;
  background: #1abc9c;
}
La combinación de ambos es la mejor práctica: interacción visual con ratón y también accesibilidad con teclado.
  • Botón “Solo hover”: responde al ratón.
  • Botón “Solo focus-visible”: responde al teclado.
  • Botón “Hover + Focus-visible”: responde a ambos casos (la opción más completa).