不能动画兄弟元素[重复]

Question

这个问题在这里已有答案：

• Is there a “previous sibling” CSS selector? 15个答案
• What does the “~” (tilde/squiggle/twiddle) CSS selector mean? 5个答案

好吧，我有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

只需使用background元素切换图标即可。代字号仅适用于下一个元素。见下面的例子。另一个解决方案是使用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>