I’m trying to hover some link blocks (Div Block Courses List - div block 6) which come from a collection list and I need to get the CMS BG color when I hover, but I tried everything and I can’t make it.
I even tried to do it with manually with interactions, but because the link blocks are the same selector (also tried with combo selectors but still detected the same selector) then the color background is the same for all of them. I need to apply to every link block its BG color according to the CMS information.
I thought you could use custom code for that, and do this:
And it works, kid of, but as it’s processed on load, all the CSS rules for all the items override one another and what you end up having is the same hover color everywhere, the last one declared actually.
I often look for a way to have unique classes for CMS collection items in a list, and I just found a way, actually… And it works well with your use-case.
First add an Embed block inside your link element, in the Collection Item. Give that block a class, and give it position:absolute width:100% height:100%.
Now open the Embed component and add HTML code to add a div. The trick is to use the slug as a class name, because we know the slug is unique, and the slug has no space in it, it’s safe to use as a class name.
Then add some CSS style code, using the slug field again to target the element, and the color field to declare the color.
Yeah!! It’s working, I would never figure it out with this code. So many thanks!
Now I need that the color remain active when I click the link block (so kind of pressed state), so you can see where you are. Is this also working with code?
Not really. I’m not moving out of the page, the only element changing is the Div Block Info Courses, which is connected to the collection and then, when I click the cell, this info is changing, all in the same page and same level (or at least is what I want, but I just saw when you click in the cell a 404 page is showing up, which was not the result before to add the code)
Here is a video so you can see what happened before:
Definitely the code has an incompatibility with this function I guess. Regarding the hovering, it’s perfectly working, but then, when I click on the cell, which was linked to the Div Block Info Courses, it’s not working anymore. So here is the 1st problem, but it comes with 2 more problems:
2nd Issue: (video recording #2)
After scrolling down in the Div Block Section / info I need to stay there, but every time I click on a cell, the page scrolls up to the Div Block Section / Image and I have to scroll down again to see how the information on the Div Block Info Courses changed. How can I stay in Div Block Section / info?
(Remember this is not happening with the code I added to fix the hovering problem, only works if I remove it).
And 3rd Issue:
You can check the video, I tried to make it easy (recording #3).
I realized that because inside the parent Div Block Section / info there are some children divs with overflow (scroll) content, it’s not really flowing scrolling down from one to another section. The flow gets stuck with the children divs scrolls, so I think a good solution could be that interaction: scroll & snap. I tried and it worked out, BUT (there is always a but, omg) then every time I try to scroll up inside the children divs, everything goes up again tot he image section and it’s not possible to have a nice flowing.
