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

样本的关键点如下：

我有一个表示图像的元素（比如视频图像屏幕）和一个表示另一个图像的子元素（比如90x60，“播放”图标）

有没有办法只通过CSS来解决这个问题（在悬停大图像时进行更改）

您可以执行以下操作：

.big:hover .small{

  // do stuff
}

检查这个

注意：我在这里使用的是

div

而不是

img

元素。

您可以这样做：

.big:hover .small{

  // do stuff
}

检查这个

注意：我在这里使用的是

div

而不是

img

元素

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

.big:hover .small{

  // do stuff
}