添加hover颜色

Question

更新，。 我能够将代码编辑成这个吗？ 当我加载网站时，我可以看到想要的按钮，但它会变回失去所有“风格”。 有什么线索吗？

我想知道是否有人知道我如何在悬停时像使用按钮那样改变颜色？ 该按钮现在不起作用，因为我临时更改了“quid”和“ruid”以防止垃圾邮件。 我想要它，这样当你在它上面输入 hover 时，整个按钮变成白色，文字变成黑色。 提前致谢！

还需要提及的是，此代码已添加到 Squarespace 上的“代码块”。 所以所有的变化都必须在块内发生。

<center>
<style>
#glfButton {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 16px;
  background-color: transparent;
  color: white;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  border: 2px solid white;  
  font-weight: bold;
}

#glfButton:hover{
color: black;
background-color: white;

}
</style>
  
<span 
  data-glf-cuid="test" data-glf-ruid="test" data-glf-reservation="true" id="glfButton"> Reserver online!
</span>

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

Answer 1

脚本中的某些内容似乎正在向 ID 添加 integer。 使用 class 似乎可以可靠地工作。

<center>
<style>
.glfButton {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 16px;
  background-color: transparent;
  color: white;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  border: 2px solid white;  
  font-weight: bold;
}

.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>

Answer 2

 #glfButton1 { padding-left: 30px; padding-right: 30px; padding-top: 20px; padding-bottom: 20px; font-size: 16px; background-color: transparent; color: blue; font-size: 20px; text-align: center; cursor: pointer; border: 2px solid white; font-weight: bold } #glfButton1:hover{ color: black; }