Heim > Artikel > Web-Frontend > So erzielen Sie den Anzeige- und Ausblenden-Effekt, wenn die Maus durch CSS läuft
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!