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
Installieren Sie Windows Server 2019 auf VMware Workstation (Grafisches Tutorial)
Wenn Sie aufgefordert werden, einen Schlüssel ein...
Vue-Elternkomponente ruft Funktionsimplementierung der Unterkomponente auf
Die übergeordnete Vue-Komponente ruft die Funktio...
Detaillierte Erläuterung des Prozesses zur Verwendung von Docker zum Erstellen einer PHP-Betriebssystemumgebung in der CentOS7-Umgebung
Verwandte Artikel: Installieren Sie Docker mit yu...
Ein Beispiel für die Umgestaltung eines Puzzlespiels mit vue3
Vorwort Es dauerte zwei Tage, um ein Puzzlespiel ...
Detaillierte Erklärung zum Javascript-Event-Bubbling, Event-Capture und Event-Delegation
1. Ereignissprudeln : Wenn im Prozess der Ereigni...
Dünne Linientabelle zum Drucken von Webseiten + ultimative Strategie zum Drucken von Seiten
Als ich kürzlich für einen Kunden druckte, bat er ...
Details zum TypeScript-Mapping-Typ
Inhaltsverzeichnis 1. Zugeordnete Typen 2. Mappin...
So stellen Sie einzelne Tabellendaten mithilfe der vollständigen MySQL-Datenbanksicherungsdaten wieder her
Vorwort Beim Sichern der Datenbank wird eine voll...
Wie implementiert Vue die Kommunikation zwischen Komponenten?
Inhaltsverzeichnis 1. Kommunikation zwischen Vate...
W3C Tutorial (3): W3C HTML Aktivitäten
HTML ist eine Hybridsprache, die zum Veröffentlic...
Einführung in die reaktive Funktion toRef-Funktion ref-Funktion in Vue3
Inhaltsverzeichnis Reaktive Funktion Verwendung: ...
Beispiel für die Anpassung von rem an mobile Geräte
Vorwort Überprüfung und Zusammenfassung von REM-A...
Dinge, die Sie nicht über die CSS-Pseudoelemente ::before und ::after wissen
CSS hat zwei Pseudoklassen, die nicht häufig verw...
Einführung in die Überwachung des MySQL MHA-Betriebsstatus
Inhaltsverzeichnis 1. Projektbeschreibung 1.1 Hin...
Verwenden Sie CSS3-Hintergrundsteuerungseigenschaften + Farbübergang, um einen Farbverlaufseffekt zu erzielen
CSS3-Hintergrundbild bezogen Kompatibilität: IE9+...