Wie kann ich einen CSS-Hover-Status aktiv halten, nachdem die Maus das Element verlassen hat?

Beibehalten des CSS-Hover-Status nach dem „Unhovering“

Im Webdesign wird der Hover-Status häufig verwendet, um beim Bewegen des Mauszeigers zusätzliche Inhalte oder Effekte anzuzeigen über ein Element. Dieser Zustand verschwindet jedoch normalerweise, wenn der Mauszeiger das Element verlässt. In diesem Artikel wird eine CSS-Lösung untersucht, um den Hover-Zustand auch nach dem „Unhovering“ beizubehalten.

Das Problem

Viele Anfänger stehen vor der Herausforderung, den Hover-Zustand beizubehalten. Betrachten Sie zum Beispiel den folgenden Beispielcode:

#about:hover #onabout {
  display: block;
}

Wenn Sie mit der Maus über das #about-Element fahren, wird das #onabout-Element sichtbar. Es verschwindet jedoch, sobald der Hover-Zustand endet.

CSS-Lösung

Glücklicherweise bietet CSS eine Lösung mit Übergangsverzögerung. Diese Eigenschaft gibt die Wartezeit an, bevor CSS-Übergänge angewendet werden. Indem wir ihn auf einen Wert ungleich Null setzen, können wir den Hover-Zustand nach dem Aufheben des Hovers für eine Weile beibehalten.

div img {
  transition: 0s 180s;
  opacity: 0;
}

div:hover img {
  opacity: 1;
  transition: 0s;
}

Dieser Code stellt sicher, dass das Bild (img) nach dem Aufheben des Hovers 180 Sekunden lang sichtbar bleibt.

Alternativer Ansatz

Eine weitere CSS-Technik beinhaltet die Verwendung von Transformation und Fokus, um das Bild anschließend auszublenden Klicken.

div:hover img:focus {
  transition: 3s;
  opacity: 0;
  transform: rotate(-360deg) scale(0.23);
}

Dieser Ansatz erfordert das Hinzufügen von tabindex zum Element im HTML-Markup und Klicken auf das Bild, um den Fading-Effekt auszulösen.

Durch den Einsatz dieser CSS-Techniken können Sie den Hover-Status auch nach dem Aufheben des Hovers beibehalten und so das Benutzererlebnis auf Ihren Webseiten verbessern.

Das obige ist der detaillierte Inhalt vonWie kann ich einen CSS-Hover-Status aktiv halten, nachdem die Maus das Element verlassen hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!