Recientemente, encontré una supervisión CSS bastante vergonzosa. Estaba desarrollando un sitio web con una barra lateral estrecha que contenía íconos. Al carecer de espacio para el texto descriptivo, el diseño requería una información sobre herramientas accesible, pero inicialmente oculta, desencadenada por un flotador prolongado. La información sobre herramientas aparecería después de un flotador de tres segundos.

Mi enfoque inicial involucró a JavaScript State Management:

1. una variable de estado para rastrear la visibilidad de información de herramientas (visible/oculto). Este estado actualizaría una clase en el elemento HTML relevante.
2. Event Listeners ( mouseenter , mouseLeave ) para administrar las transiciones de estado.
3. un retraso de tres segundos antes de configurar el estado en visible on mouseenter .
4. el tooltip permanecería oculto ( mouseLeave ).

Este fue un proyecto React, por lo que usar el estado de JavaScript se sintió natural. Sin embargo, en retrospectiva, resultó innecesariamente complejo. Los eventos mouseenter y mouseLeave se sintieron ligeramente poco confiables, y toda la funcionalidad podría haberse implementado de manera más concisa y eficiente con CSS solo.

La realización vergonzosa: aproveché innecesariamente una biblioteca JavaScript cuando una solución CSS estaba fácilmente disponible.

conservé la ui React pero eliminé la gestión del estado de JavaScript. La solución involucró una propiedad simple css transition-loay :

.thing {
  transition: 0.2s;
}
.thing:hover {
  transition-delay: 3s; /* delay hover animation only ON, not OFF */
}

Esta elegante línea de una línea logra perfectamente el efecto deseado de longitud larga.

Este enfoque, sin embargo, no aborda completamente la accesibilidad de la pantalla táctil. Mientras que los lectores de pantalla manejan el texto y los usuarios de escritorio accesibles se benefician de las información sobre herramientas, los usuarios de solo touch pueden perder las etiquetas de los iconos. Mi proyecto se dirigió a pantallas grandes, suponiendo la disponibilidad del cursor, pero la accesibilidad táctil sigue siendo una preocupación. Si el elemento es un enlace, el : hover podría activarse en el toque inicial. Si el enlace conduce a una página con un título claro, eso podría proporcionar un contexto suficiente. De lo contrario, el manejo de eventos de JavaScript para eventos táctil sigue siendo una opción viable.