实现按钮悬停时指定列表项背景变色的Squarespace自定义CSS方案

核心思路 #

要实现悬停按钮时对应列表项背景变色，我们可以通过CSS选择器关联按钮的hover状态与父列表项的样式；如果需要兼容旧版浏览器，可通过调整元素层级的技巧间接实现效果。

方案1：主流浏览器兼容（推荐） #

利用:has()选择器，当列表项包含的按钮被悬停时，直接为该列表项设置背景色。同时统一过渡效果，减少重复代码：

/* 统一设置过渡动画，减少冗余 */
.user-items-list li {
  transition: background-color 0.2s ease;
}
.user-items-list .list-item-content__button {
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* 第1个列表项：按钮hover时的自身样式 + 列表项背景色 */
.user-items-list li:nth-child(1):has(.list-item-content__button:hover) {
  background-color: #f0f0f0; /* 替换为你需要的列表项背景色 */
}
.user-items-list li:nth-child(1) .list-item-content__button:hover {
  background-color: #2547A0 !important;
  opacity: 1;
}

/* 第2个列表项：自定义不同颜色 */
.user-items-list li:nth-child(2):has(.list-item-content__button:hover) {
  background-color: #e8f4f8;
}
.user-items-list li:nth-child(2) .list-item-content__button:hover {
  background-color: #16a34a !important;
  opacity: 1;
}

/* 第3个列表项，以此类推 */
.user-items-list li:nth-child(3):has(.list-item-content__button:hover) {
  background-color: #fff3e0;
}
.user-items-list li:nth-child(3) .list-item-content__button:hover {
  background-color: #f59e0b !important;
  opacity: 1;
}

• 兼容性：:has()支持Chrome、Firefox 121+、Safari等主流浏览器，完全适配Squarespace的访客群体。

方案2：旧版浏览器兼容 #

如果需要兼容Firefox旧版本等不支持:has()的环境，可通过将按钮的可交互区域扩展至整个列表项，间接用li:hover触发背景色变化：

.user-items-list li {
  position: relative;
  transition: background-color 0.2s ease;
}
.user-items-list .list-item-content__button {
  position: relative;
  z-index: 1; /* 确保按钮在顶层，可正常点击 */
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
/* 用伪元素填充整个列表项区域，让悬停按钮等同于悬停列表项 */
.user-items-list li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* 第1个列表项 */
.user-items-list li:nth-child(1):hover {
  background-color: #f0f0f0;
}
.user-items-list li:nth-child(1) .list-item-content__button:hover {
  background-color: #2547A0 !important;
  opacity: 1;
}

/* 第2个列表项 */
.user-items-list li:nth-child(2):hover {
  background-color: #e8f4f8;
}
.user-items-list li:nth-child(2) .list-item-content__button:hover {
  background-color: #16a34a !important;
  opacity: 1;
}

内容的提问来源于stack exchange，提问作者Deklin