更改父悬停时的第一个子css

Question

样本的小提琴在这里： 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元素。

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 Fiddle