Hover Collection List item but effect all other items in the list

Design help Custom code
1

So I have 3 collection lists underneath with a lot of names. I want to hover a name and change the color of all other names in these lists.

How would I try to accomplish this? I could not find some good hints by searching. If it is way easier show me an approach with only one collection list. Thank you very much! :))

2

It’s an unusual styling requirement.

If all of the items are siblings you can probably achieve it with custom CSS alone. For example if these were list items, you could first style everything inside of the hovered list, and then counter-style the hovered item itself.

ul:hover li {
    color: red; 
}
ul li:hover {
    color: black; 
}

Otherwise you’ll need to use JS.

3

Thank you so much! Somehow wasn’t aware you can override the styles so easily @memetican

1 Like