Long Hover

Ich hatte neulich einen **sehr peinlichen** CSS-Moment.

Ich arbeitete am Frontend-Code eines Designs, das eine schmale Seitenleiste mit Symbolen hatte. Dort ist nicht genug Platz, um Text anzuzeigen, der die Symbole erklärt. Die Idee ist, dass wir zugänglichen (aber standardmäßig visuell versteckten) Text verwenden, der bereits vorhanden ist, als Tooltip bei einem „langen Hover“. Das heißt, bei einem Gerät mit einem Cursor, der über dem Element verweilt, zum Beispiel drei Sekunden lang.

Daher dachte ich mir Folgendes...

1. Ich kann den Zustand verwenden: Der Tooltip ist entweder sichtbar oder nicht sichtbar. Ich werde den Zustand verwalten, der sich im DOM als Klassenname auf einem HTML-Element manifestiert.
2. Dann kümmere ich mich um die Logik zur Änderung dieses Zustands.
3. Der Standardzustand ist nicht sichtbar, aber wenn die Maus länger als drei Sekunden über dem Element verweilt, schalte ich den Zustand auf sichtbar.
4. Wenn die Maus das Element jemals verlässt, bleibt der Zustand (oder wird) nicht sichtbar.

Dies war ein React-Projekt, daher war der Zustand einfach im Hinterkopf. Das Ergebnis sah dann so aus

Nicht schlecht, oder? Naja. Die Zustandsverwaltung in JavaScript eröffnet zwar potenziell einige Möglichkeiten, aber in diesem Fall war es völlig übertrieben. Abgesehen davon, dass ich mouseenter und mouseleave etwas heikel finde, hätte CSS das Ganze auch mit weniger Code erledigen können.

Das ist der peinliche Teil… warum sollte ich auf eine JavaScript-Bibliothek zurückgreifen, um das zu tun, wenn das CSS, das ich bereits schreibe, es erledigen kann?

Ich lasse die UI in React, aber reiße das gesamte Zustandsverwaltungszeug heraus. Alles, was ich tun werde, ist, ein transition-delay: 3s hinzuzufügen, wenn das .icon :hover ist, sodass es null Sekunden dauert, wenn es nicht angefahren wird, und dann sofort verschwindet, wenn der Mauszeiger wegfährt).

Ein langes Hovern ist im Grunde eine Einzeiler-Lösung in CSS

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

Funktioniert großartig.

Ein Problem, das hier nicht angesprochen wird, ist das Problem mit Touchscreens. Man könnte argumentieren, dass Screenreader mit dem zugänglichen Text zurechtkommen und Desktop-Browser wegen der benutzerdefinierten Tooltips, aber Benutzer mit reinen Touchscreens könnten die Icon-Beschriftungen möglicherweise nicht entdecken. In meinem Fall baute ich für ein Szenario mit großen Bildschirmen, das Cursor annimmt, aber ich glaube nicht, dass es für Touchscreens hoffnungslos ist. Wenn das Element ein Link ist, wird der :hover möglicherweise ohnehin beim ersten Tippen ausgelöst. Wenn der Link Sie irgendwohin mit einem klaren Titel führt, reicht das vielleicht als Kontext. Und Sie können immer wieder zu mehr JavaScript zurückkehren und Touch-Events behandeln.