Modifier le CSS du premier enfant lors du survol du parent

Question

Le violon de l'échantillon est ici :http://jsfiddle.net/3cYtX/12/

J'ai un élément représentant une image (par exemple, un écran d'image vidéo) et un élément enfant représentant une autre image (disons 90x60, l'icône "lecture").

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

La petite image est centrée verticalement et horizontalement.

Je veux quand j'aurai fini grand image le petit on change son opacité.

Le code ci-dessous fonctionne seulement quand je survole le petit image.

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

Existe-t-il un moyen de résoudre ce problème (changez en survolant le grand image) seulement via CSS ?

Answer 1

Tu peux le faire :

.big:hover .small{

  // do stuff
}

Vérifie ça violon

Note:j'utilise div au lieu de img élément ici.

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