Hallo zusammen,
habe eine Verständnisfrage zum Pseudoelement :hover.
Ich möchte in einer Liste beim Hover über die einzelnen Elemente eine schöne underline Animation haben.
So ähnlich wie hier.
Aktuell finde ich jedoch nur Möglichkeiten für Links, auch in anderen Beispielen.
Ist es nun möglich, dass diese Animation wirklich nur für a-Elemente gedacht ist?
Alles was ich hierzu nämlich finde baut darauf auf, dass die Maus über einen Link oder Bild hovert, nicht jedoch über li, p, span usw. tags.
Seite 1 von 1
[CSS] hover Animation auf <li>?
Anzeige
#3
geschrieben 24. Juli 2018 - 18:43
Die Hover-Pseudoklasse funktioniert so ziemlich überall, nicht nur bei Links.
Notfalls ausprobieren.
Im Zweifel kann man Text auch einfach in ein span stecken und jenes mit einem :hover-Selektor versehen, entweder über den DOM-Pfad (zB h2 span:hover) oder per zugewiesener Klasse (span class="abc" einerseits und .abc:hover andererseits).
text-decoration nicht vergessen.
A verwenden, wo Anker nicht gebraucht werden, ist schlechter Stil und geht in dieselbe Richtung wie "Table zur Positionierung" .
Notfalls ausprobieren.
Im Zweifel kann man Text auch einfach in ein span stecken und jenes mit einem :hover-Selektor versehen, entweder über den DOM-Pfad (zB h2 span:hover) oder per zugewiesener Klasse (span class="abc" einerseits und .abc:hover andererseits).
text-decoration nicht vergessen.
A verwenden, wo Anker nicht gebraucht werden, ist schlechter Stil und geht in dieselbe Richtung wie "Table zur Positionierung" .
#4
geschrieben 25. Juli 2018 - 09:55
Danke euch.
Ich habe es ewig probiert und bekomme die Animation in meinem <ul> / <li> Aufbau nur so hin, dass die Animation am Ende der Aufzählung stattfindet. D.h. nicht unter jedem der einzelnen Listenpunkte.
Ich probiere aber mal weiter, die Tipps haben mir sehr geholfen :-)
Danke!
Ich habe es ewig probiert und bekomme die Animation in meinem <ul> / <li> Aufbau nur so hin, dass die Animation am Ende der Aufzählung stattfindet. D.h. nicht unter jedem der einzelnen Listenpunkte.
Ich probiere aber mal weiter, die Tipps haben mir sehr geholfen :-)
Danke!
Thema verteilen:
Seite 1 von 1