Heim > Artikel > Web-Frontend > Wie ändere ich mit CSS die Schriftfarbe, wenn die Maus darüber bewegt wird? (Code tatsächlicher Test)
Wenn wir eine Webseite durchsuchen, erscheint ein Verfärbungseffekt, wenn die Maus über einen bestimmten Text fährt. Dies ist die Verfärbung der CSS-Schriftart. Einerseits soll sie die Aufmerksamkeit des Benutzers zum Klicken erregen Andererseits soll verhindert werden, dass der Benutzer auf den falschen Text klickt. Tatsächlich ist dieser Farbänderungseffekt für CSS-Mausschriftarten sehr einfach zu erreichen. Solange Sie ein wenig CSS-Kenntnisse haben, können Sie es bedienen.
Der wichtigste Wissenspunkt ist, dass der Mauszeiger in CSS als HOVER geschrieben wird und der Mausauslöser in CSS als ACTIVE geschrieben wird.
Das spezifische Codebeispiel zum Erzielen des Schriftfarbänderungseffekts der CSS-Maus lautet wie folgt:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css字体变色测试</title> </head> <style> a { color:black} a:hover { color:red } a:active { color:blue} </style> <body> <a> 你过来指我试试!!! </a> </body> </html>
Der obige Code kann für lokale Tests direkt kopiert werden.
Hinweis: Die Farbe:rot nach a; bedeutet, dass der Linktext schwarz ist, und die Farbe:schwarz von a:hover; bedeutet, dass der Linktext danach rot ist Wenn die Maus darüber bewegt wird, wird die Farbe eines :aktiven:blau gleich blau, wenn die Maus auf den Linktext klickt.
Dann hoffe ich, dass die Einführung dieses Artikels in das Problem, wie man den Effekt der Änderung der Schriftfarbe mit der CSS-Maus erzielt, für alle hilfreich sein wird!
[Empfehlungen für verwandte Inhalte]
Detaillierte Erläuterung der Textschriftfarbe (CSS-Farbe) in CSS
Schriftfarbe in HTML und CSS Zusammenfassung der Einstellungen
Einstellungen für Schriftfarbe und Hintergrundfarbe
Beispiel, wie CSS Textfarbverläufe implementiert
Das obige ist der detaillierte Inhalt vonWie ändere ich mit CSS die Schriftfarbe, wenn die Maus darüber bewegt wird? (Code tatsächlicher Test). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!