鼠标悬停时变色、放大、位移,是提升交互质感的关键。Bricks 每个元素都能单独设「悬停态」样式。本文讲怎么配。
悬停态是什么
悬停态(Hover)指鼠标移到元素上方时的外观。Bricks 的样式面板几乎每个属性都有「默认 / 悬停 / 焦点」三个状态标签,切到悬停就能单独设这一态的样式。
常见悬停效果
- 按钮:背景色变深、轻微上浮、阴影加深。
- 图片/卡片:放大、边框高亮、阴影浮现。
- 文字链接:变色、下划线展开。 这些都能在对应属性的悬停标签里设。
设置步骤
- 选中元素,在右侧样式面板找到要改的属性(如背景色、变换、阴影)。
- 点属性旁的状态标签切到 悬停(Hover)。
- 填入悬停时的值,保存即可。
- 用过渡(Transition)属性让变化更顺滑,避免生硬跳变。
注意事项
别堆太多悬停效果,过度动画反而干扰阅读。移动端没有悬停概念,记得切到手机视口检查默认态是否够清晰。
小结
悬停样式是低成本提升「高级感」的手段:选元素 → 切到悬停态 → 改样式并加过渡。克制使用,体验立刻更精致。
内容说明(整理稿):本文选题与步骤框架参考自竞对站 trybricks.com / qinbanliang 站的公开教程(源多为截图驱动教程,正文极薄),内容为 BricksWiki 基于 Bricks 官方公开文档与通用实操经验重写整理,非原文逐字翻译,也不构成官方文档。操作入口/路径以你当前 Bricks 版本为准,实操前建议对照官方文档核对。
延伸阅读
Bricks Element Style 元素样式
教程:Bricks 每个元素都有完整样式控制——布局、排版、背景、边框、特效。带你过一遍样式面板结构,快速上手。
tutorialBricks Fancy Animations 动画组件
教程:用 Bricks 生态的动画扩展零代码加淡入、视差、滚动触发等效果,并讲清克制动效的原则。
tutorialBricks 制作弹出框 Popup 模板
教程:用 Bricks 的 Popup 模板做订阅框、公告浮层,并配置自动/按钮触发与关闭方式。
tutorialBricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表
教程:Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表——acf 附完整代码可直接复用,适合外贸独立站与 WordPress 开发者。
