本文详解在 squarespace 代码块中为第三方预约按钮（如 glf）添加稳定 hover 样式的方法，解决 id 被脚本动态修改导致样式失效的问题，推荐使用 class 替代 id 实现可靠悬停交互。

在 Squarespace 的代码块中自定义第三方嵌入按钮（例如 GLF 预约按钮）的悬停效果时，一个常见却容易被忽视的问题是：直接通过 id 编写 CSS 并不能保证 hover 样式持久生效。原因在于，GLF 的嵌入脚本（ewm2.js）在加载后会动态重写或克隆 DOM 元素，并可能向原始 id 添加随机后缀（如 glfButton-123），导致你定义的 #glfButton:hover 规则失去匹配目标，样式瞬间“消失”。

✅ 正确解法是：放弃依赖 id，改用 class 进行样式绑定。CSS 类不会被脚本篡改，且具有更高的选择稳定性与复用性。

以下是经过验证、可直接粘贴至 Squarespace 代码块的完整代码：

  Reserver online!

? 关键优化说明：

• 使用 .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 驱动样式，你就能彻底摆脱“按钮闪现白色又变回透明”的困扰，让悬停效果稳定、专业、即刻生效。