Cambia il CSS del primo figlio sul genitore Hover
-
26-12-2019 - |
Domanda
Il violino del campione è qui: http://jsfiddle.net/3cytx/12/
Ho un elemento che rappresenta un'immagine (ad esempio, schermo dell'immagine video) e un elemento figlio che rappresenta un'altra immagine (dire 90x60, l'icona "Play").
<div class="big">
<img class="small">
</div>
.
La piccola immagine è centrata verticalmente e orizzontalmente.
Voglio quando ho sopra i Big immagine The piccolo si cambia la sua opacità.
Il codice Bellow funziona solo quando ho offerto l'immagine piccola .
.small {
opacity: 0.5;
}
.small:hover {
opacity: 0.9;
}
.
C'è un modo per risolverlo (cambiare su Passapolo "EM> Big Immagine) solo tramite CSS?
Soluzione
Puoi farlo:
.big:hover .small{
// do stuff
}
.
Verifica questo Fiddle
Nota: sto usando div
anziché elemento img
qui.
Altri suggerimenti
.big {
width:200px;
height:150px;
background-color: green;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.small {
opacity: 0.9;
background: red;
width:90px;
height:60px;
}
.big:hover > .small {
opacity: 0.5;
}
.
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow