In CSS wird der Selektor „:hover“ verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt, und dann den Stil dafür festzulegen. Das Syntaxformat ist „element:hover{css style};“ „: „hover“ muss sich in „:link“ und „:visited“ (falls vorhanden) befinden, damit der Stil wirksam werden kann.
Verwandte Empfehlungen: „Programmier-Tutorial“
: Der Hover-Selektor wird verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt.
Tipp: Der :hover-Selektor kann für alle Elemente verwendet werden, nicht nur für Links.
In der CSS-Definition muss :hover nach :link und :visited (falls vorhanden) platziert werden, damit der Stil wirksam wird.
:Link-Selektor legt den Stil von Links fest, die auf nicht besuchte Seiten verweisen, :visited-Selektor wird verwendet, um Links zu besuchten Seiten festzulegen, und :active-Selektor wird für aktive Links verwendet.
css: Hover-Selektor-Verwendung
Verwendung 1:
Das bedeutet: Wenn die Maus über dem Stil a schwebt, wird die Hintergrundfarbe von a auf Gelb gesetzt.
a:hover
{
background-color:yellow;
}dies ist der Die häufigste Verwendung besteht darin, einfach den Stil durch a zu ändern.
Verwendung 2:
Verwenden Sie a, um den Stil anderer Blöcke zu steuern die Brüder eines Elements c (Geschwisterelement):
.a:hover .b {
background-color:blue;
}Verwenden Sie a, um das benachbarte Element d von a zu steuern:
.a:hover + .c {
color:red;
}1. Fügen Sie nichts in der Mitte hinzu, um die untergeordneten Elemente zu steuern; 2. „+“ steuert das gleiche Level-Element (Geschwisterelement);
BeispielVerwenden Sie eine Schaltfläche, um den Bewegungsstatus eines Felds zu steuern Wenn Sie die Schaltfläche drücken, stoppt die Bewegung der Box und die Maus bewegt sich weg, die Box bewegt sich weiter
Körpercode: .a:hover ~ .d {
color:pink;
}
<body>
<div class="btn stop">stop</div>
<div class="animation"></div>
</body>Weitere verwandte Artikel finden Sie auf der
PHP-Chinese-Website! !
Das obige ist der detaillierte Inhalt vonWas nützt Hover in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
