Squarespace代码块按钮悬停样式失效及效果实现求助

数据老陈

2026-8-3

问题原因与解决方案

样式丢失的核心原因

你引入的第三方预订嵌入脚本 ewm2.js 加载完成后，会完全替换你手动编写的 <span id="glfButton"> 元素。原本绑定在这个ID上的CSS样式，会因为目标元素被移除而失效，所以页面加载初期能看到自定义按钮，脚本执行后样式就消失了。

修复方案（适配Squarespace代码块环境）

我们需要调整CSS选择器的匹配逻辑，确保样式能覆盖脚本生成的新按钮，同时保留悬停效果：

改用属性选择器：脚本生成的按钮会保留 data-glf-reservation="true" 这个属性，用它作为选择器比ID更可靠
添加 !important 强制优先级：覆盖嵌入脚本自带的默认样式，避免被Squarespace全局样式或脚本样式冲掉

修改后的完整代码

<center>
<style>
/* 匹配带预订属性的按钮元素 */
[data-glf-reservation="true"] {
  padding: 20px 30px !important;
  font-size: 20px !important;
  background-color: transparent !important;
  color: white !important;
  text-align: center !important;
  cursor: pointer !important;
  border: 2px solid white !important;  
  font-weight: bold !important;
}

/* 悬停效果 */
[data-glf-reservation="true"]:hover {
  color: black !important;
  background-color: white !important;
}
</style>
  
<span 
  data-glf-cuid="test" data-glf-ruid="test" data-glf-reservation="true">Reserver online!
</span>

<script src="https://www.fbgcdn.com/embedder/js/ewm2.js" defer async ></script>