css - 不能为兄弟元素设置动画

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)
}

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

标签： cssjquery-animateelementsiblings

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>