Bricks 元素悬停样式怎么设？用伪类做 hover 效果实战教程

现象：想要鼠标悬停就有反馈

做按钮、卡片，鼠标移上去毫无反应，用户体验很干。你想要的那种“悬停变色、轻微上浮、加个阴影”的微交互，靠 CSS 的 :hover 伪类最稳，Bricks 原生就支持，不用写一行 JS。

根因：Bricks 用 CSS 伪类切换状态

Bricks 不会给每个状态单独新建一个元素，而是用 CSS 伪类（pseudo-class） 在同一个元素上叠加“不同状态下的样式”。你选中元素后点顶部的“伪类”按钮，切到 :hover，之后在 Style 面板里改的全都是“鼠标悬停时”的样式。本质上就是给同一个选择器加了一条 .element:hover { ... } 规则，默认态和悬停态共用一个元素，只是样式表里分了两段。

步骤：用 :hover 伪类做按钮悬停效果

我们以最常用的 Button 元素为例：

1. 在页面里拖一个 Button 元素，先把默认态样式设好（背景色、文字色、圆角、内边距）。
2. 选中按钮，点顶部工具栏的“伪类”图标（一个冒号 : 样的小按钮）。
3. 在弹出的伪类列表里选 :hover。Bricks 默认列出几个常用的（:hover、:active、:focus 等），需要别的可以自己加。
4. 切到 :hover 态后，去 Style 面板改样式：
   • 背景改成黑色、文字改成白色；
   • Transform 里设 translateY(-4px) 之类做上浮；
   • Transition 设 0.3s（控制动画快慢，想要更慢就拉到 0.5s）。
5. 再点一次伪类按钮切回默认态，保存，去前台把鼠标移上去看效果。

下面这段 CSS 就是上面操作的等价写法，方便你理解原理：

.my-btn {
  background: #2563eb;
  color: #fff;
  transition: all 0.3s ease;
}
.my-btn:hover {
  background: #000;
  color: #fff;
  transform: translateY(-4px);
}

常见误区与进阶

• Transition 要设在默认态：过渡动画（Transition）写在默认态样式里，hover 态只管变化目标，这样悬停和移开都有动画；只写在 hover 态，移开时会「啪」地跳回去。
• 别忘了 :focus 和 :active：键盘用户靠 :focus 定位焦点，点击瞬间靠 :active 反馈。做按钮交互时三个伪类一起配，无障碍和手感都过关。
• 触屏设备没有 hover：手机上鼠标悬停不存在，重要交互别只挂在 hover 上——点击后的状态（:active、:focus）也要能看出反馈。
• 一个元素可以叠多个伪类：Bricks 伪类列表默认给了常用的几个，需要更多状态就自己加，规则之间按 CSS 优先级正常覆盖。

小结

悬停效果全靠伪类，记住“先设默认态 → 再切 :hover → 在 Style 里改”三步。Transition 控制动画快慢，想叠加 :focus、:active 等更多状态，用同样的办法在伪类列表里加就行。

需要帮你配一套全站统一的交互规范？联系 Ray Chan，顺手帮你把按钮、卡片的悬停效果理顺。

常见问题（FAQ）

Q：Bricks 做悬停效果要写 JS 吗？ A：不用。用 CSS 伪类 :hover，Bricks 原生支持，选中元素切到伪类状态直接改样式即可。

Q：Transition 应该设在哪里？ A：设在默认态样式里，这样悬停和移开都有平滑动画；只写在 hover 态，移开时会瞬间跳回。

Q：默认有哪些伪类可选？ A：:hover、:active、:focus 等常用伪类，Bricks 默认列出，需要别的可以自己添加。

Q：手机上没有悬停怎么办？ A：触屏设备没有 hover，重要交互别只挂在 hover 上，配合 :active、:focus 让点击也有反馈。

Q：悬停动画卡顿？ A：检查 Transition 时长（0.3s 左右够用）和是否给 Transform / 背景这类高频属性做过渡，避免不必要的动画属性。

• 相关阅读：Bricks Setup Guide 延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程