本文详解在 squarespace 代码块中为第三方预约按钮（如 glf）添加稳定 hover 样式的方法，解决 id 被脚本动态修改导致样式失效的问题，推荐使用 class 替代 id 实现可靠悬停交互。
在 Squarespace 的代码块中自定义第三方嵌入按钮（例如 GLF 预约按钮）的悬停效果时，一个常见却容易被忽视的问题是：直接通过 id 编写 CSS 并不能保证 hover 样式持久生效。原因在于，GLF 的嵌入脚本（ewm2.js）在加载后会动态重写或克隆 DOM 元素，并可能向原始 id 添加随机后缀（如 glfButton-123），导致你定义的 #glfButton:hover 规则失去匹配目标，样式瞬间“消失”。
✅ 正确解法是：放弃依赖 id，改用 class 进行样式绑定。CSS 类不会被脚本篡改，且具有更高的选择稳定性与复用性。
以下是经过验证、可直接粘贴至 Squarespace 代码块的完整代码：
<center>
<style>
.glfButton {
display: inline-block;
padding: 20px 30px;
font-size: 20px;
color: white;
background-color: transparent;
border: 2px solid white;
font-weight: bold;
text-align: center;
cursor: pointer;
transition: all 0.3s ease; /* 推荐添加平滑过渡 */
text-decoration: none;
}
.glfButton:hover {
color: black;
background-color: white;
}
</style>
<span
data-glf-cuid="test"
data-glf-ruid="test"
data-glf-reservation="true"
id="glfButton"
class="glfButton">
Reserver online!
</span>
<script src="https://www.fbgcdn.com/embedder/js/ewm2.js" defer async></script>
</center>? 关键优化说明：
- 使用 .glfButton 类替代 #glfButton ID，规避脚本对 ID 的干扰；
- 添加 display: inline-block 确保内联 支持 padding 和背景色渲染；
- 加入 transition: all 0.3s ease 实现颜色/背景渐变，提升用户体验；
- 所有样式均封装在
- 保留原始 id="glfButton" 以兼容脚本初始化逻辑（部分嵌入器仍需 ID 存在），但样式不依赖它。
⚠️ 注意事项：
- 不要删除 id 属性（即使不用它写样式），某些嵌入脚本可能依赖其存在进行初始定位；
- 若后续需适配深色模式，可补充 @media (prefers-color-scheme: dark) 规则；
- Squarespace 的代码块默认不支持外部 CSS 或 JS 文件，因此所有样式必须内联书写。
通过 class 驱动样式，你就能彻底摆脱“按钮闪现白色又变回透明”的困扰，让悬停效果稳定、专业、即刻生效。
