仅当某个元素是悬停元素的子元素时，才将悬停时的样式应用于另一个元素

Question

我有一些包含图像的div。当悬停在div上时，图像应该旋转以创建类似相册的效果。

当悬停在任何div上时，我试图使用的方法为所有div的图像设置样式。我需要它只为悬停的div的子对象设置样式。

我希望有更多的div，我需要在不指定每个div和div子级的情况下完成这项工作？有没有一种聪明的方法来实现这一点？

HTML

 <div id="main">
        <div>
            <img src="../img/punime/1cc.jpg">
            <img src="../img/punime/2cc.jpg">
            <img src="../img/punime/3cc.jpg">
        </div>
        <div>
            <img src="../img/punime/1cc.jpg">
            <img src="../img/punime/2cc.jpg">
            <img src="../img/punime/3cc.jpg">
        </div>
        <div>
            <img src="../img/punime/1cc.jpg">
            <img src="../img/punime/2cc.jpg">
            <img src="../img/punime/3cc.jpg">
        </div>
        <div>
            <img src="../img/punime/1cc.jpg">
            <img src="../img/punime/2cc.jpg">
            <img src="../img/punime/3cc.jpg">
        </div>
    </div>

CSS

div#main div {
    width: 50%;
    height: 260px;
    position:relative;
    float:left;
    overflow:visible;
    }
div#main div > * {
    position:absolute;
    margin:auto;
    }
div#main div:hover + div img:first-child {
    transform:rotate(7deg);
    }

Answer 1

将CSS更新为

#main div:hover img { 
  /* styles here */
}

这意味着：对于#main中的任何div：样式化作为悬停div 的子级的所有图像

Codepen演示