本文详解如何在 squarespace 的代码块中，通过 css 类选择器稳定实现第三方嵌入按钮（如 glf 预约按钮）的 hover 悬停交互效果，解决因脚本动态修改 id 导致样式失效的问题。
在 Squarespace 中嵌入第三方预约按钮（例如 GLF / Foodbooking 的 ewm2.js 嵌入脚本）时，常遇到一个典型问题：你精心编写的 :hover 样式在页面初加载时短暂生效，但几毫秒后立即“回退”——按钮恢复默认样式，悬停效果消失。根本原因在于：GLF 的嵌入脚本会在运行时动态重写或克隆 DOM 元素，并自动为原始元素的 id 添加随机数字后缀（如 glfButton12345），导致你基于 #glfButton 的 ID 选择器失效。CSS 规则无法匹配新生成的、ID 已变更的元素，因此 hover 效果中断。
✅ 正确解法是弃用 ID 选择器，改用 class 选择器——因为第三方脚本通常不会修改元素的 class 属性，仅操作 id。只要你在 上显式声明 class="glfButton"，并用 .glfButton 定义样式，CSS 就能持续生效。
以下是完整、可直接粘贴到 Squarespace「代码块」中的稳定方案：
<center>
<style>
.glfButton {
display: inline-block; /* 关键！使 padding/border 生效 */
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; /* 可选：添加平滑过渡效果 */
}
.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>? 关键优化说明：
- display: inline-block 是必需的—— 默认为内联元素，不支持 padding 和 border 的盒模型渲染，添加此声明才能让按钮呈现完整矩形区域；
- 使用 padding: 20px 30px 替代冗余的 padding-top/padding-bottom 等单独声明，提升可维护性；
- transition: all 0.3s ease 让颜色与背景切换更自然（非必需，但强烈推荐）；
- class="glfButton" 必须与 CSS 中的 .glfButton 严格一致，且保留在 标签内（脚本不会移除 class）。
⚠️ 注意事项：
- 不要删除 id="glfButton" ——部分第三方脚本可能仍依赖原始 ID 进行初始化，保留它可确保功能正常；
- 若后续需多处复用该样式，只需统一添加 class="glfButton" 即可，无需重复写 CSS；
- Squarespace 的代码块会自动包裹内容，
标签虽已过时，但在当前上下文中仍有效；如追求语义化，可用 替代。通过将样式绑定到稳定的 class 而非易被脚本篡改的 id，即可一劳永逸解决 hover 失效问题，让按钮真正具备专业级交互体验。
