Ändern Sie das CSS des ersten untergeordneten Elements beim Hover des übergeordneten Elements

StackOverflow https://stackoverflow.com//questions/24057644

  •  26-12-2019
  •  | 
  •  

Frage

Die Geige des Beispiels ist hier:http://jsfiddle.net/3cYtX/12/

Ich habe ein Element, das ein Bild darstellt (z. B. einen Videobildschirm) und ein untergeordnetes Element, das ein anderes Bild darstellt (z. B. 90 x 60, das „Wiedergabe“-Symbol).

<div class="big">
    <img class="small">
</div>

enter image description here

Das kleine Bild wird vertikal und horizontal zentriert.

Ich will, wenn ich über die groß Bild das klein Man ändert seine Deckkraft.

Der folgende Code funktioniert nur wenn ich mit der Maus darüber schwebe klein Bild. 

.small {
    opacity: 0.5;
}
.small:hover {
    opacity: 0.9;
}

Gibt es eine Möglichkeit, das zu beheben (ändern Sie es, indem Sie mit der Maus darüber fahren). groß Bild) nur über CSS?

War es hilfreich?

Lösung

Du kannst das :

.big:hover .small{

  // do stuff
}

Überprüfen Sie dies Geige

Notiz:Ich benutze div anstatt img Element hier.

Andere Tipps

generasacodicetagpre.

Demo fiddel

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top