Heim > Artikel > Web-Frontend > So verwenden Sie Hover in CSS
So verwenden Sie Hover in CSS
- 小老鼠Original
- 2023-11-24 10:32:051455Durchsuche
In CSS ist :hover ein Pseudoklassenselektor, mit dem das Element ausgewählt wird, über dem sich der Mauszeiger befindet. Sie können :hover verwenden, um einige Stiländerungen anzuwenden, wenn der Benutzer mit der Maus über ein Element fährt.
Hier ist ein einfaches Beispiel für die Verwendung von :hover, um die Farbe eines Links zu ändern:
a {
color: blue;
}
a:hover {
color: red;
}
Wenn der Benutzer in diesem Beispiel mit der Maus über einen Link fährt, ändert sich die Farbe des Links in Rot. Wenn kein Mouseover erfolgt, ist die Farbe des Links blau.
Zusätzlich zum Ändern von Farben können Sie mit :hover auch andere Stiländerungen anwenden, z. B. Hintergrundfarbe, Rahmenstil, Schriftgröße und mehr. Hier ist ein komplexeres Beispiel:
button {
background-color: lightgray;
border: none;
padding: 10px 20px;
font-size: 16px;
}
button:hover {
background-color: gray;
color: white;
border: 2px solid white;
font-size: 18px;
}
Wenn der Benutzer in diesem Beispiel mit der Maus über eine Schaltfläche fährt, ändert sich die Hintergrundfarbe der Schaltfläche in Grau, die Textfarbe in Weiß und der Rahmen in Weiß sowie die Schriftgröße wird auf 18 Pixel erhöht.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Hover in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!