Cambiar el CSS de primer hijo en el flujo de padres.

Question

El violín de la muestra está aquí: http://jsfiddle.net/3cytx/12/

Tengo un elemento que representa una imagen (digamos, pantalla de imagen de video) y un elemento secundario que representa otra imagen (por ejemplo, 90x60, el icono "Reproducir").

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

La imagen pequeña se centra verticalmente y horizontalmente.

Quiero cuando estoy en la imagen grande . El pequeño cambia su opacidad.

El código Bellow funciona solo cuando hago la imagen de pequeña .

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

¿Hay una manera de solucionar que (cambio en la imagen de EM> BIG a través de CSS?

Answer 1

puedes hacer esto:

.big:hover .small{

  // do stuff
}

Verifique este Fiddle

Nota: Estoy usando div en lugar del elemento img aquí.

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

violín demo