Beispielcode zum Ändern des Stils anderer Tags durch Bewegen der Maus mithilfe von CSS
|
Vorwort: Soweit ich weiß, kann CSS derzeit nur den Stil der Geschwister-Tags und der untergeordneten Tags unter dem Tag beim Hovern steuern. Wenn jemand eine gute Methode hat, bitte um Rat!
1. Untergeordnete Tags kontrollieren (Leerzeichen zwischen .div1:hover und .div2 verwenden)
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
.div1,.div2 {
Breite: 200px;
Höhe: 100px;
Hintergrundfarbe: rosa;
}
.div2 {
Hintergrundfarbe: Aqua;
Anzeige: keine;
}
.div1:hover .div2 {
Anzeige: Block;
}
</Stil>
</Kopf>
<Text>
<div Klasse="div1">div1
<div Klasse="div3">div3</div>
<div Klasse="div2">div2</div>
</div>
</body>
</html>Solange das gesteuerte Tag ein untergeordnetes Tag des steuernden Tags ist, haben andere Tags (wie etwa .div3) keinen Einfluss auf den Effekt! 2. Geschwister-Tags steuern (verwenden Sie + zwischen .div1:hover und .div2)
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
.div1,.div2 {
Breite: 200px;
Höhe: 100px;
Hintergrundfarbe: rosa;
}
.div2 {
Hintergrundfarbe: Aqua;
Anzeige: keine;
}
.div1:hover+.div2 {
Anzeige: Block;
}
</Stil>
</Kopf>
<Text>
<div Klasse="div1">div1</div>
<!-- <div class="div3">div3</div> -->
<div Klasse="div2">div2</div>
</body>
</html>Bei der Verwendung von „+“ muss .div2 für die Wirksamkeit dicht hinter .div stehen, sonst ist es wirkungslos! ! ! Beispiel: Nachdem .div3 auskommentiert wurde, kann .div1 den Stil von .div2 nicht mehr steuern! ! ! Befindet sich zwischen dem steuernden Tag und dem kontrollierten Tag Inhalt, muss dieser in der dritten Art geschrieben werden! 3. Kontrollieren Sie Geschwister-Tags (mit Inhalt in der Mitte) (~ wird zwischen .div1:hover und .div2 verwendet)
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
.div1,.div2 {
Breite: 200px;
Höhe: 100px;
Hintergrundfarbe: rosa;
}
.div2 {
Hintergrundfarbe: Aqua;
Anzeige: keine;
}
.div1:hover~.div2 {
Anzeige: Block;
}
</Stil>
</Kopf>
<Text>
<div Klasse="div1">div1</div>
<div Klasse="div3">div3</div>
<div Klasse="div2">div2</div>
</body>
</html>Voraussetzung für die Verwendung dieser Methode ist, dass sich das kontrollierte Tag unterhalb des steuernden Tags befinden muss und dazwischen beliebiger Inhalt stehen kann. Zusammenfassen:
Damit ist dieser Artikel über die Verwendung von CSS zum Ändern der Stile anderer Tags beim Bewegen der Maus abgeschlossen. Weitere Informationen zum Ändern der Stile anderer Tags beim Bewegen der Maus finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass Sie 123WORDPRESS.COM auch in Zukunft unterstützen werden! |
<<: Div-CSS-Benennungsstandards, CSS-Klassenbenennungsregeln (entsprechend SEO-Standards)
>>: Wie verstecke ich den Text im A-Tag und zeige das Bild an? Kompatibel mit 360-Grad-Rendering
Artikel empfehlen
So ändern Sie den MySQL-Zeichensatz utf8 in utf8mb4
Wenn für MySQL 5.5 der Zeichensatz nicht festgele...
10 HTML-Tabellen-bezogene Tags
Tatsächlich werden viele Leute sagen: „Ich habe ge...
Linux-Systemreparaturmodus (Einzelbenutzermodus)
Inhaltsverzeichnis Vorwort 1. Allgemeine Fehlerbe...
Analyse der Nutzung des Xmeter API-Schnittstellentesttools
XMeter API bietet einen umfassenden Online-Schnit...
Eine kurze Diskussion über den magischen Schrägstrich im Nginx Reverse Proxy
Beim Konfigurieren des Nginx-Reverse-Proxys könne...
Ein kurzer Vortrag über die parasitäre Kompositionsvererbung in JavaScript
Vererbung von Kompositionen Kombinationsvererbung...
Zusammenfassung zum Ändern des Root-Passworts in MySQL 5.7 und MySQL 8.0
MySQL 5.7-Version: Methode 1: Verwenden Sie den B...
Das WeChat-Applet implementiert das Scrollen von Text
In diesem Artikelbeispiel wird der spezifische Co...
CSS-Stil zum Zentrieren des HTML-Tags im Browser
CSS-Stil: Code kopieren Der Code lautet wie folgt:...
So zeigen Sie kleine Symbole in der Browsertitelleiste einer HTML-Webseite an
Genau wie dieser Effekt ist auch die Methode sehr...
Beispielcode des Spread-Operators und seiner Anwendung in JavaScript
Der Spread-Operator ermöglicht die Erweiterung ei...
NULL und leere Zeichenfolge in MySQL
Ich bin vor kurzem mit MySQL in Berührung gekomme...
So installieren Sie den Zookeeper-Dienst auf einem Linux-System
1. Erstellen Sie den Ordner /usr/local/services/z...
Prozessdiagramm für das erste Bereitstellungs-Webprojekt von Tomcat
Legen Sie Ihr eigenes Webprojekt im Verzeichnis w...
Vue + webrtc (Tencent Cloud) Praxis der Implementierung der Live-Broadcast-Funktion
Inhaltsverzeichnis 1. Live-Übertragungseffekt 2. ...