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!
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.
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.