mit :hover Text hervorheben?
Hi, ich will, dass zum Beispiel ein Link, wenn man über ihn fährt mit der maus größer und unterstrichen wird. Das geht ja zum Beispeil mit
a:hover {
text-decoration: underline;
font-size: 200%;
}
Das funktioniert auch gut, ich will aber dass dabei eine kleine Animation passiert. Der Strich soll sich von links nach rechts "aufbauen" und die Schrift soll langsam größer werden. Wie kann man das mit nur css machen?
3 Antworten
Die Werte können in CSS animiert werden
https://www.w3schools.com/css/css3_animations.asp
Die Linie wird allerdings in den CSS nur als Flag eingeschaltet
Das lässt sie so also nicht animieren.
Allerdings sollte man auf das auch eher verzichten.
Es gibt ja auch mobile Bedienung- dort gibt es keine Maus und hover.
Links sollten dort auch immer als Link erkennbar sein.
Das mit der Linie ist tatsächlich etwas komplizierter. Die Linie kann nicht mit text-decoration: underline; animiert werden, sondern muss ein separates HTML Element sein. So geht das zum Beispiel mit purem CSS:
a {
/* Wichtig, damit sich die Breite des Links dem Text anpasst */
display: inline-block;
}
a:hover {
font-size: 200%;
/* Wichtig, damit die Linie mit position: absolute; relative zum Link positioniert werden kann. */
position: relative;
}
/* Durch ::after erscheint ein separates HTML Element innerhalb des Links */
a::after {
content: "";
display: block;
background-color: black;
/* bottom und left sind zur positioniertung der Linie */
bottom: 0;
left: 0;
height: 2px;
width: 0;
/* Das width attribut wird animiert, mit einer Länge von 0.5 Sekunden */
transition: width 0.5s ease-in-out;
}
/* Die Breite der Linie wird bei hover auf 100% gesetzt */
a:hover::after {
width: 100%;
}
Hier wird die Animation mit transition gelöst. Alternativ könnte man auch css keyframes nutzen.
Das mit dem Strich ist nicht so einfach, den Text kannst du ganz einfach animieren:
in das a element (nicht das Hover!):
transition: font-size 1s;
Das würde das ganze jetzt mit einer Dauer von 1 Sekunde animieren.