: Die Verwendung von Hover, also die Stileinstellung, die vorgenommen wird, wenn der Mauszeiger in das Element bewegt wird
<!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 in ein Element bewegt und das Element selbst durch:hover
<🎜 in einen neuen Stil wechselt >
<!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>.container:hover .content, und es gibt ein Leerzeichen nach Hover; Aber , Child: Hover kann den Stil des übergeordneten Elements nicht ändern
Beispiel 3Das obige ist der detaillierte Inhalt vonBeispiele für die Verwendung der Hover-Pseudoklasse in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
