상위 호버에서 첫 번째 자식 CSS를 변경하십시오

Question

샘플의 바이올린은 여기에 있습니다. http://jsfiddle.net/3cytx/12/

이미지를 나타내는 요소 (비디오 이미지 화면)와 다른 이미지를 나타내는 자식 요소 (90x60, "재생"아이콘)를 나타내는 요소가 있습니다.

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

.

작은 이미지는 수직 및 수평 중심으로 가운데 있습니다.

big 이미지 위에 내가 원하는 small 하나의 불투명도를 변경합니다.

small 이미지를 유행 할 때

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

.

는 그 고치는 방법이 있습니다 ( big 이미지를 호버 변경시)

Answer 1

이 작업을 수행 할 수 있습니다 :

.big:hover .small{

  // do stuff
}

.

이 바이올린

참고 : 여기에서 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;
}

.

데모 바이올린