Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung des Hover-Selektors in CSS
Detaillierte Erläuterung der Verwendung des Hover-Selektors in CSS
- 小云云Original
- 2017-12-05 13:20:242885Durchsuche
Manchmal müssen Sie die beiden Mausereignisse Mouseover und Mouseout verwenden, aber das Schreiben von js ist schwieriger und Sie müssen Listening-Ereignisse hinzufügen, sodass Dinge, die mit CSS gelöst werden können, so weit wie möglich mit CSS gelöst werden sollten kann die Leistung verbessern. Lassen Sie mich weiter unten darüber sprechen. Verständnis von :hover:
Als wir Computeranwendungen lernten, brachte uns der Lehrer bei, den :hover-Selektor zu verwenden, um das Dropdown-Menü zu vervollständigen. Bisher wussten wir nur, wie man es benutzt, aber wir wussten nicht, warum wir es auf diese Weise benutzten. Notieren Sie sich jetzt, wie man es benutzt
Definition und Verwendung
Definition:
:Hover-Selektor wird verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt.
:Hover-Selektor gilt für alle Elemente
Verwendung 1:
Das bedeutet: Wenn die Maus über den Stil a schwebt, wird die Hintergrundfarbeinstellung von a für gelb
a:hover
{
background-color:yellow;
}Dies ist die häufigste Verwendung. Ändern Sie einfach den Stil durch ein
Verwendung 2:
Verwenden Sie a, um den Stil anderer Blöcke zu steuern:
Verwenden Sie a, um das Unterelement b von a zu steuern:
.a:hover .b {
background-color:blue;
}Verwenden Sie a, um das Geschwisterelement c (Geschwisterelement) von a zu steuern:
.a:hover + .c {
color:red;
}Verwenden Sie a, um das nahegelegene Element d von a zu steuern:
.a:hover ~ .d {
color:pink;
}Um es zusammenzufassen:
1. Fügen Sie nichts in der Mitte hinzu, um untergeordnete Elemente zu steuern.
3
Verwenden Sie eine Schaltfläche, um den Bewegungsstatus einer Box zu steuern. Wenn die Maus über die Schaltfläche bewegt wird, stoppt die Bewegung der Box bewegen
Körpercode:
<body>
<p class="btn stop">stop</p>
<p class="animation"></p>
</body>
CSS-Stil:
<style>
.animation {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
animation: move 2s infinite alternate;
-webkit-animation: move 2s infinite alternate;
}
@keyframes move {
0% {
transform: translate(-100px, 0);
}
100% {
transform: translate(100px, 0);
}
}
.btn {
padding: 20px 50px;
background-color: pink;
color: white;
display: inline-block;
}
.stop:hover ~ .animation {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
</style>
Erzielen Sie die Wirkung:
Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Hover-Selektors in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!