You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Webflow实现子div悬停时切换父div背景图(无需自定义代码)

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

注意:确保父div有足够的尺寸展示背景图,交互目标选择时要准确选中父容器,避免误选其他元素。

内容的提问来源于stack exchange,提问作者Gunjan Raj

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.19 04:14:55