Hi everyone, I have a CMS collection list that I’m trying to have different colors of hover states. I found this tutorial (Custom hover color for CMS Items in a List) and I think I followed it correctly, but it’s not working on my site to change the color of each collection list item. I would love some help troubleshooting! Thank you so much!
Here is my public share link: Webflow - Brooke's Portfolio
Hi Brooke can you share a link to a published version of your site?
Sure.
Here’s the published site: https://www.brookeharris.org
Try this-
Wow! Thank you so much, that solved the problem! It’s working now (yay!) but it only activates the hover color when I hover over any area that’s not in a div block. Is there a way to have it so the color activates when you hover over any part of the collection list item?
I don’t know enough about the original solution design, but if it’s working the way you want in the cloneable, then it should have the answers you need. Just check every element and make certain you’re carrying over the styles properly in yours.
I suspect the z-index and opacity may need to be set somewhere but that’s a total guess based on the overlay concept.
Maybe worth noting, I suspect the approach here was built some years ago. It’s using an embed which contains an absolutely positioned overlay. In early 2023 Webflow added CMS bound custom attributes so it would probably be cleaner to redesign this as a CSS-only solution. But you’d need to know a bit about custom CSS, and it depends on the exact effect you’re trying to create.
This approach might work better for you-
hi @brhardesign you have set wrong selector for :hover . Webflow add its class .w-dyn-item to each generated collection item and you need set :hover to this element.
.w-dyn-item:hover .(slug){
background-color: (color);
}
What this mean is “hover over parent element and change bg colour for slug element”.
Done