Webflow实现子div悬停时切换父div背景图(无需自定义代码)
无需自定义代码实现Webflow子div悬停切换父div背景图
- 先准备好要切换的三张背景图,上传到Webflow的「资产」面板。
- 选中父div,在「样式」面板设置初始背景图(可选),确认父div处于可选中状态,避免被其他元素遮挡。
- 给第一个子div添加交互:
- 选中子div,打开「交互」面板,点击「添加交互」。
- 触发条件选择「鼠标悬停」→「进入悬停」。
- 添加动作:选择「更改样式」,目标选父div(通过层级选择器从当前子div向上定位到父容器)。
- 在样式更改项中,找到「背景」,选择对应的第一张背景图,设置背景覆盖方式(如
cover)。 - 如需退出悬停时恢复初始背景,再添加「退出悬停」触发,动作同样是更改父div样式为初始背景。
- 重复上述交互设置步骤,给另外两个子div分别绑定对应的第二、第三张背景图。
- 进入Webflow预览模式测试,验证悬停子div时父div背景是否正确切换。
注意:确保父div有足够的尺寸展示背景图,交互目标选择时要准确选中父容器,避免误选其他元素。
内容的提问来源于stack exchange,提问作者Gunjan Raj
相关产品推荐
相关产品推荐

