无法动画化同级元素

Question

好吧，我的div中包含3个元素：

<div> 
    <img src="http://localhost/images/4.png" alt="alt 4" class="background">
    <img src="http://localhost/images/4_icon.png" alt="alt 4" class="icon">
    <p>
        bla bla
    </p>
</div>

和CSS，例如：

.icon:hover ~ .background {
    transform: scale(1.2)
}

但不知道为什么，这不起作用。

Answer 1

只需切换带有背景元素的图标即可。代字号仅适用于下一个元素。请参见下面的示例。另一个解决方案是使用js。

<div> 
    <img src="http://localhost/images/4_icon.png" alt="alt 4" class="icon">
    <img src="http://localhost/images/4.png" alt="alt 4" class="background">
    <p>
        bla bla
    </p>
</div>