css - 不能动画兄弟元素

标签 css jquery-animate element siblings

<分区>

好吧,我有一个包含 3 个元素的 div:

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

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

最佳答案

只需将图标与背景元素切换即可。波浪号仅适用于下一个元素。请参见下面的示例。另一种解决方案是使用 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>

关于css - 不能动画兄弟元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52313513/

上一篇:html - 为什么我的网络应用程序在为移动设备构建时位置不固定?

下一篇:html - 为什么我不能让按钮的高度等于它们的宽度?

相关文章:

javascript - 使用 javascript 更改字体系列字体大小和字体粗细不起作用?

jquery - 如何使用 jquery 验证插件为错误标签设置动画

python - 如何使用字典中的键查找值

javascript - 使用 jquery 更改元素类型

jquery - 在附加元素之前如何解析它的内容? (jQuery)

css - DIV 底部的中心图像

css - css中的浏览器类型检测

javascript - 将列表向上/向下滚动到一个 div

javascript - 为什么我的 jquery animate() 回调会导致溢出?递归

JavaScript - 动态待办事项列表 - 编辑列表