Wie kann ich CSS verwenden, um Hover-Effekte gleichzeitig auf mehrere Elemente anzuwenden?

Bewegen des Mauszeigers über ein Element, Auswirkungen auf mehrere Elemente in CSS

Im HTML-Layout kann es zu einem Szenario kommen, in dem das Bewegen des Mauszeigers über ein Element ausgelöst werden sollte Auswirkungen auf mehrere verwandte Elemente. Betrachten Sie den folgenden HTML-Code:

<div class="section">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

Sowohl die Klassen „image“ als auch „layer“ haben Rahmen mit unterschiedlichen Farben für ihren Normal- und Hover-Zustand. Das Ziel besteht darin, dass sich die Rahmenfarbe beider Elemente ändert, wenn Sie mit der Maus über das Element „Ebene“ fahren und umgekehrt.

CSS-Lösung:

Diesen Effekt ohne JavaScript erzielen ist mit CSS möglich. Hier ein Beispiel:

HTML:

<div class="section">
    <img src="myImage.jpg" />
    <div class="layer">Lorem Ipsum</div>
</div>

CSS:

.section {
    background: #ccc;
}

.layer {
    background: #ddd;
}

.section:hover img {
    border: 2px solid #333;
}

.section:hover .layer {
    border: 2px solid #F90;
}

Erklärung:

• Der „.section:hover img“-Selektor Gibt an, dass, wenn der Mauszeiger über das „.section“-Element bewegt wird, das darin enthaltene „img“-Element einen 2 Pixel großen festen Rahmen mit der Farbe #333 haben sollte.
• Ähnlich gilt der „.section:hover .layer“-Selektor zielt auf das „.layer“-Element innerhalb der „.section“ ab und ändert seine Rahmenfarbe beim Hover in #F90.

Dieses CSS stellt sicher, dass, wenn Sie Bewegen Sie den Mauszeiger über das Element „Ebene“. Die Rahmenfarben der Elemente „Bild“ und „Ebene“ werden aktualisiert, wodurch der gewünschte Effekt ohne Skripting erzielt wird.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS verwenden, um Hover-Effekte gleichzeitig auf mehrere Elemente anzuwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!