Cambia il CSS del primo figlio sul genitore Hover

Question

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?

Answer 1

Puoi farlo:

.big:hover .small{

  // do stuff
}

.

Verifica questo Fiddle

Nota: sto usando div anziché elemento img qui.

Answer 2

.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;
}

.

DEMO Fiddle