Heim > Artikel > Web-Frontend > CSS: So verwenden Sie die Hover-Pseudoklasse
CSS: So verwenden Sie die Hover-Pseudoklasse
- 一个新手Original
- 2017-10-20 11:05:593622Durchsuche
: Die Verwendung von Hover, also die Stileinstellungen, die vorgenommen werden, wenn der Mauszeiger in das Element bewegt wird
Beispiel 1
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo01</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
width: 300px;
margin-top: 10px;
background: #ff0000;
}
ul li:hover{
background: #000000;
}
</style></head><body>
<ul>
<li></li>
<li></li>
<li></li>
</ul></body></html>Die obige Situation liegt vor, wenn sich der Mauszeiger bewegt in das Element, durch :hover bewirkt, dass das Element selbst einen neuen Stil ändert
Beispiel 2
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo01</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 300px;
height: 300px;
border: 1px solid #ff9f5a;
}
.content{
width: 100px;
height: 100px;
background: #27e7ff;
}
.container:hover .content{
background: #000000;
}
</style></head><body>
<p class="container">
<p class="content"></p>
</p></body></html>Im obigen Beispiel können Sie bei einer Eltern-Kind-Beziehung die ändern Stil des Kindes durch den Elternteil :hover Geändert, geschrieben als .container:hover .content, es gibt ein Leerzeichen nach , aber , child:hover kann den Stil des nicht ändern parent
Beispiel 3
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo01</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 300px;
height: 300px;
border: 1px solid #ff9f5a;
}
.content{
width: 100px;
height: 100px;
background: #27e7ff;
}
.container:hover +.content{
background: #000000;
}
</style></head><body>
<p class="container"></p>
<p class="content"></p></body></html> Wenn im obigen Beispiel die beiden Elemente keine Eltern-Kind-Beziehung, sondern eine Geschwisterbeziehung sind, übergeben Sie .container:hover .content Diese Schreibmethode ist ungültig, Sie müssen das „+“-Zeichen übergeben, das heißt, .container:hover +.content kann den Effekt anzeigen, aber achten Sie auf die Reihenfolge der beiden Elemente ~
Das obige ist der detaillierte Inhalt vonCSS: So verwenden Sie die Hover-Pseudoklasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!