修复通用 hover 选择器穿透嵌套 Group 导致的卡片悬浮错乱
在为客户开发 WordPress FSE Block Theme 时发现：博客列表页的卡片悬浮时文字区域发生偏移，但卡片外框不动，视觉上非常违和。记录根因与解法。
TL;DR
通用卡片 hover 选择器 .wp-block-columns .wp-block-column > .wp-block-group:hover 会匹配到卡片内部嵌套的文字 group，导致悬浮时内层文字偏移而外层卡片不动。修复方式：用 .wp-block-post-template 前缀重置内层 group 的 hover 效果。
问题现象
博客列表页使用卡片式布局（外层 border group 包裹图片 + 文字 group）。鼠标悬浮卡片时：
- 内部的标题和摘要文字产生
translateY(-4px)位移 - 外层卡片的 border 和 shadow 没有任何变化
- 视觉效果像文字"飘出"了卡片
根因
FSE 中卡片 pattern 的 HTML 结构是嵌套的：
<!-- 外层卡片 group (有 border) -->
<div class="wp-block-group has-border-color ...">
<img ... /> <!-- 特色图片 -->
<!-- 内层文字 group -->
<div class="wp-block-group" style="padding:...">
<h2>文章标题</h2>
<p>摘要文字...</p>
</div>
</div>
主题中定义了一个通用 hover 特效：
.wp-block-columns .wp-block-column > .wp-block-group:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
这个选择器的本意是让整张卡片悬浮上移。但在博客列表页中，post-template 块内部的卡片也被 wp-block-columns 包裹，导致选择器同时命中了内层文字 group（它也是 .wp-block-column > .wp-block-group）。
由于内层 group 没有 border 和 shadow，只表现为文字位移，而外层卡片没有位移效果。
解决方案
分两步处理：重置内层 + 给外层单独加 hover。
1. 重置内层 group 的 hover
用 .wp-block-post-template 前缀提高优先级，把内层 group 的所有 hover 效果清零：
/* Reset hover for inner groups inside post template cards */
.wp-block-post-template .wp-block-columns .wp-block-column > .wp-block-group {
transition: none;
}
.wp-block-post-template .wp-block-columns .wp-block-column > .wp-block-group:hover {
transform: none;
box-shadow: none;
}
2. 给外层卡片加独立的 hover
外层卡片有 .has-border-color 类，用它做精确匹配：
/* Blog card (outer bordered group) -- hover lift + shadow */
.wp-block-post-template .wp-block-group.has-border-color {
transition:
transform 0.3s ease-out,
box-shadow 0.3s ease-out;
}
.wp-block-post-template .wp-block-group.has-border-color:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
为什么不直接缩小通用选择器范围？
通用选择器被多个 pattern 共享（features-grid、pricing、testimonial 等），这些 pattern 的 group 只有一层，不存在嵌套穿透问题。缩小通用选择器反而会破坏其他 pattern 的 hover 效果。
重置内层比限制外层更可靠，因为：
- 不影响其他使用通用 hover 的 pattern
- 精确针对有嵌套问题的场景
- CSS 层面完全隔离，不需要修改任何 HTML/PHP
经验总结
在 FSE Block Theme 中添加 hover 特效前，务必：
- 检查 pattern 的实际 HTML 嵌套结构
- 确认选择器只命中目标元素（外层容器），不会穿透到内部 group
- 如果多个 pattern 共享同一选择器，优先用"重置内层"而非"限制外层"
对类似需求感兴趣？联系合作