Heim >Web-Frontend >CSS-Tutorial >So erzielen Sie den Anzeige- und Ausblenden-Effekt, wenn die Maus durch CSS läuft
So erzielen Sie den Anzeige- und Ausblenden-Effekt, wenn die Maus durch CSS läuft
- 青灯夜游Original
- 2021-11-09 17:22:5810695Durchsuche
Implementierungsmethode: 1. Fügen Sie dem Element zuerst den „display: none;“-Stil hinzu. 2. Verwenden Sie den „:hover“-Selektor und den „display:block;“-Stil Vorübergehend die Syntax „parent“ Element:hover element {display:block;}“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
CSS, um die Mouseover-Anzeige zu realisieren und versteckte Effekte zu hinterlassen
Implementierungsidee:
Verstecken Sie zuerst das Element;
-
Dann verwenden Sie den „
:hover“-Selektor, um den Mouseover-Stil festzulegen – Anzeigeelement
Implementierungscode:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 520px;
height: 50px;
background-color: #008000;
}
span{
color: azure;
display: none;
}
div:hover span{
display:block;
}
</style>
</head>
<body>
<div>
<span>hello</span>
</div>
</body>
</html>Rendering:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Anzeige- und Ausblenden-Effekt, wenn die Maus durch CSS läuft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!