Изменить CSS первого ребенка на родительский наклон

Question

Гидка образца здесь: http://jsfiddle.net/3cytx/12/

У меня есть элемент, представляющий изображение (скажем, экран видеоизображения) и дочерний элемент, представляющий другое изображение (скажем, 90x60, значок «PLAY»).

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

.

Малое изображение центрируется вертикально и горизонтально.

Я хочу, когда я через Big image the маленький один измените его непрозрачность.

Код BELED WROTES только Когда я навязываю Small изображение.

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

.

Есть ли способ исправить это (изменение на hover the big изображение) только через css?

Answer 1

Вы можете сделать это:

.big:hover .small{

  // do stuff
}

.

Проверьте эту проверку этого Widdle

Примечание. Я использую div вместо элемента img здесь.

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 Siddle