Search code examples
csshovercss-animationssquarespace

CSS - Change background color of list on button hover

In simplest terms: I have a list with a button inside of that list. I would like for my list background color to change upon hovering over the button. Please don't be mistaken for me wanting the button's background color to change.

Here's an example of what I want the list to do:

enter image description here enter image description here

Unfortunately, because it's Squarespace. I have limited access to changing the current CSS. Instead what I can do is overwrite CSS with custom CSS which I've done in the past.

They have preset class's for each element. The following are the class names:

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

I've been able to change the button color background on hover, you can reference this code here:

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

I would like to do this on multiple list's so the code can not be generalized (cannot make all other list's change the same color if I want them to be different colors) so please specify with "nth-child" or any other means.

Thanks in advance!

Solution

  • You could just use the :has pseudo class. So you can do something like this:

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

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

    jsfiddle example: https://jsfiddle.net/OoShiit/1zdyrkne/9/

    Look at the mdn web docs about the :has pseudo class: https://developer.mozilla.org/en-US/docs/Web/CSS/:has