17370845950

本文详解如何在 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「代码块」中的稳定方案：

  Reserver online!

? 关键优化说明：

• 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 失效问题，让按钮真正具备专业级交互体验。