CSS - 在按钮悬停时更改列表的背景颜色

Question

用最简单的话来说：我有一个列表，其中有一个按钮。我想为我的列表背景颜色改变悬停在按钮上.请不要误会我想要改变按钮的背景颜色。

这是我希望列表执行的操作的示例：

不幸的是，因为它是 Squarespace。我对更改当前 CSS 的访问权限有限。相反，我能做的是用我过去做过的自定义 CSS 覆盖 CSS。

他们为每个元素预设了类。以下是类名：

.user-items-list
.list-item-content__button

我已经能够在悬停时更改按钮颜色背景，您可以在此处参考此代码：

.user-items-list li:nth-child(1) .list-item-content__button:hover{
background-color:#2547A0!important;
opacity: 1;
transition: 0.2s;
}

.user-items-list li:nth-child(1) .list-item-content__button{
 transition: 0.2s;
}

我想在多个列表上执行此操作，因此无法概括代码（如果我希望它们是不同的颜色，则无法使所有其他列表更改相同的颜色）所以请使用“nth-child”或任何其他方式指定。

提前致谢！

Answer 1

.user-items-list li:nth-child(1):hover .list-item-content__button {
background-color:#2547A0!important;
opacity: 1;
transition: 0.2s;
}

当您将鼠标悬停在其中的按钮上时，此代码将更改列表项的背景颜色。