javascript - 在父悬停时更改第一个子 css

Question

样本的 fiddle 在这里: http://jsfiddle.net/3cYtX/12/

我有一个代表图像的元素(比如视频图像屏幕)和一个代表另一个图像的子元素(比如 90x60，“播放”图标)。

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

小图垂直居中，水平居中。

我希望当我在大图像上方时，小改变它的不透明度。

当我将鼠标悬停在小 图像上时，下面的代码仅有效。

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

有没有办法通过 CSS 解决这个问题(悬停大图像时更改)仅？

Answer 1

你可以这样做:

.big:hover .small{

  // do stuff
}

检查这个fiddle

注意:我在这里使用 div 而不是 img 元素。