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!
Die Steuerung anderer Tags (basierend auf der Beziehung zwischen dem steuernden Tag und dem gesteuerten Tag) kann wie folgt in drei Typen unterteilt werden:

Das Steuertag in diesem Artikel ist .div1
Das kontrollierte Tag ist .div2

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:

Untergeordnete Tags steuern	Verwenden Sie Leerzeichen zwischen
Steuert das Geschwisterlabel, das direkt dahinter steht	Verwenden Sie "+" in der Mitte
Kontrollieren Sie alle nachfolgenden Geschwister-Tags	Verwenden Sie "~" in der Mitte

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

Tomcat9-Download, -Installation und -Konfiguration + ausführliches Tutorial zur Integration in Eclipse

Beispielcode zum Ändern des Stils anderer Tags durch Bewegen der Maus mithilfe von CSS

Tomcat9-Download, -Installation und -Konfiguration + ausführliches Tutorial zur Integration in Eclipse

So lösen Sie das Problem, dass die Website kein direktes Kopieren von Seiteninhalten oder Informationen zulässt

So installieren Sie FastDFS in Docker

1 Minute Vue implementiert Rechtsklickmenü

Ein kurzer Vergleich von Props in React

So zeigen Sie den Prozentsatz und die ersten paar Prozent in MySQL an

Verwendung der VUE-Renderfunktion und ausführliche Erklärung

Eine elegante Möglichkeit, die Autorisierungsanmeldung für WeChat-Applets zu handhaben

Node.js erstellt ein einfaches Crawler-Case-Tutorial

js kehrt zur vorherigen Seite zurück und aktualisiert den Code

Artikel empfehlen

Analyse der Vorteile von path.join() in Node.js

Eine kurze Einführung in den MySQL-Dialekt

Eine kurze Diskussion über die Lebenszyklusfunktionen von React Component

So verwenden Sie DCL zum Verwalten von Benutzern und Steuern von Berechtigungen in MySQL

react-beautiful-dnd implementiert die Drag-and-Drop-Funktion für Komponenten

CentOS 8.0.1905 installiert ZABBIX Version 4.4 (verifiziert)

Notieren Sie die Schritte zur Verwendung des MQTT-Servers, um eine sofortige Kommunikation in Vue zu realisieren

Codebeispiele für MySQL-Batchoperationsanweisungen „Select“, „Insert“ und „Update“

Zusammenfassung der DTD-Verwendung in HTML

Detailliertes Tutorial zur Installation von ElasticSearch 6.x im Docker

Vollständige MySQL-Lernhinweise

MySQL in Ubuntu 18.04 installieren (grafisches Tutorial)

JavaScript zum Erzielen eines Bodeneffekts

Verwenden von JavaScript zum Implementieren von Karusselleffekten

Detaillierte Erläuterung des Implementierungsprozesses des Docker-Cross-Host-Container-Kommunikations-Overlays