Heim > Artikel > Web-Frontend > Beispiele für die Verwendung der Hover-Pseudoklasse in CSS
Beispiele für die Verwendung der Hover-Pseudoklasse in CSS
- 黄舟Original
- 2017-10-21 10:37:341892Durchsuche
: Die Verwendung von Hover, also die Stileinstellung, die vorgenommen wird, 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 in ein Element bewegt und das Element selbst durch:hover
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> Wenn im obigen Beispiel eine Eltern-Kind-Beziehung besteht, kann der Stil des Kindes durch die :hover-Schreibmethode des Elternteils geändert werden: .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!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel für die Verwendung von CSS-Eigenschaften zur Implementierung eines Weihnachtsbaums (Bild)Nächster Artikel：Beispiel für die Verwendung von CSS-Eigenschaften zur Implementierung eines Weihnachtsbaums (Bild)