Alteração de primeira criança css no principal foco

Question

O violino da amostra está aqui:http://jsfiddle.net/3cYtX/12/

Eu tenho um elemento que representa uma imagem (por exemplo, a imagem de vídeo da tela) e um elemento filho, representando uma outra imagem (dizer 90x60, o ícone "reproduzir").

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

A pequena imagem é centrada na horizontal e na vertical.

Eu quero quando eu sobre o grande imagem pequeno uma alteração de sua opacidade.

O código abaixo funciona apenas quando eu passe o pequeno imagem.

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

Existe uma maneira de corrigir o que muda passe o grande imagem) apenas via CSS?

Answer 1

Você pode fazer isso :

.big:hover .small{

  // do stuff
}

Verifique isso violino

Nota:Eu estou usando div em vez de img elemento aqui.

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

Demonstração De Mexer