recentemente, encontrei uma supervisão bastante embaraçosa do CSS. Eu estava desenvolvendo um site com uma barra lateral estreita contendo ícones. Na falta de espaço para o texto descritivo, o design exigia dicas de ferramentas acessíveis, mas inicialmente ocultas, acionadas por um pairar prolongado. A dica de ferramenta apareceria após um pau de três segundos.

Minha abordagem inicial envolveu Javascript State Management:

1. Uma variável de estado para rastrear a visibilidade da dica de ferramenta (visível/oculta). Este estado atualizaria uma classe no elemento HTML relevante.
2. ouvintes do evento ( mouseEnter , mouseleave ) para gerenciar as transições de estado.
3. um atraso de três segundos antes de definir o estado como visível em mouseenter .
4. A tira da ferramenta permaneceria oculta ( mouseleave ).

Este foi um projeto React, portanto, o uso do estado de JavaScript parecia natural. No entanto, em retrospecto, mostrou -se desnecessariamente complexo. O mouseEnter e eventos MouseLeave pareciam um pouco não confiáveis, e toda a funcionalidade poderia ter sido implementada de maneira mais concisa e eficiente com o CSS sozinho.

A realização embaraçosa: eu alavancei desnecessariamente uma biblioteca JavaScript quando uma solução CSS estava prontamente disponível.

Eu mantive a interface do reação, mas removi o gerenciamento de estado JavaScript. A solução envolveu um CSS simples transição-Delay propriedade:

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

Este elegante liner atinge perfeitamente o efeito desejado de longa data.

Essa abordagem, no entanto, não aborda completamente a acessibilidade da tela de toque. Enquanto os leitores de tela lidam com os usuários acessíveis de texto e desktop se beneficiam das dicas de ferramentas, os usuários somente toque podem perder os rótulos dos ícones. Meu projeto direcionou telas grandes, assumindo a disponibilidade do cursor, mas a acessibilidade ao toque continua sendo uma preocupação. Se o elemento for um link, o : hover pode ser ativado no toque inicial. Se o link levar a uma página com um título claro, isso pode fornecer um contexto suficiente. Caso contrário, o manuseio de eventos JavaScript para eventos de toque continua sendo uma opção viável.