Wie kann ich Hover-Effekte gleichzeitig auf mehrere CSS-Elemente anwenden?

Anwenden von Hover-Effekten auf mehrere Elemente in CSS

Wenn Sie mit der Maus über ein bestimmtes Element fahren, möchten Sie möglicherweise Effekte auf mehrere verwandte Elemente anwenden. Sie haben beispielsweise zwei benachbarte Elemente, „Bild“ und „Ebene“, jeweils mit separaten Rändern. Wie können Sie dafür sorgen, dass das Bewegen des Mauszeigers über ein Element die Randfarben beider Elemente beeinflusst?

Lösung ohne JavaScript

Um dies ohne JavaScript zu erreichen, können Sie CSS verwenden so:

.section {
  background: #ccc;
}

.layer {
  background: #ddd;
}

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

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

Wenn Sie in diesem Beispiel mit der Maus über das Element „.section“ fahren, hat das darin enthaltene „img“ einen 2-Pixel-Vollton Rand mit der Farbe #333. Gleichzeitig erhält das „.layer“-Element innerhalb von „.section“ auch einen 2 Pixel großen festen Rahmen mit der Farbe #F90. Identisches Verhalten tritt auf, wenn Sie mit der Maus über das Element „.layer“ fahren.

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