Vor kurzem habe ich ein ziemlich peinliches CSS -Versehen begegnet. Ich habe eine Website mit einer schmalen Seitenleiste mit Symbolen entwickelt. Das Design mangelt an Platz für den beschreibenden Text und forderte zugängliche und doch ursprünglich verborgene Tooltips, die durch einen längeren Schwebes ausgelöst wurden. Der Tooltip würde nach einem dreikunden-Schweber erscheinen.

Mein erster Ansatz beinhaltete JavaScript State Management:

1. Eine Statusvariable zur Verfolgung von Tooltip -Sichtbarkeit (sichtbar/versteckt). Dieser Status würde eine Klasse auf dem relevanten HTML -Element aktualisieren.
2. Ereignislistener ( mouseenter , museleave ), um die staatlichen Übergänge zu verwalten.
3. Eine Verzögerung von drei Sekunden, bevor der Status an sichtbar auf mouseenter .
4. Der Tooltip würde versteckt bleiben ( MousEleave ).

Dies war ein React -Projekt, also fühlte sich die Verwendung von JavaScript State natürlich an. Im Nachhinein erwies es sich jedoch als unnötig komplex. Die mouseenter und mouseleave Ereignisse fühlten sich etwas unzuverlässig an, und die gesamte Funktionalität hätte mit CSS allein besser und effizienter implementiert werden können.

Die peinliche Erkenntnis: Ich habe unnötig eine Javascript -Bibliothek genutzt, wenn eine CSS -Lösung leicht verfügbar war.

Ich habe die React -Benutzeroberfläche beibehalten, aber die JavaScript -Statusverwaltung entfernt. Die Lösung umfasste eine einfache CSS transition-delay Eigenschaft:

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

Dieser elegante Ein-Liner erzielt perfekt den gewünschten Langhau-Effekt.

Dieser Ansatz spricht jedoch nicht vollständig den Touchscreen -Zugänglichkeit an. Während die Bildschirmleser den zugänglichen Text und den Desktop-Benutzer behandeln, profitieren Benutzer von den Tooltips, aber Touch-Benutzer vermissen möglicherweise die Symbolbeetikeln. Mein Projekt zielte auf große Bildschirme, bei denen die Verfügbarkeit von Cursor angenommen wird, aber die Berührungsaufnahme bleibt ein Problem. Wenn das Element ein Link ist, kann der : Hover im ersten Tippen aktiviert werden. Wenn der Link zu einer Seite mit einem klaren Titel führt, kann dies einen ausreichenden Kontext bieten. Andernfalls bleibt die Handhabung von JavaScript -Ereignissen für Touch -Ereignisse eine praktikable Option.