Hi
I made a component for the first time. When you hover I want the colour to invert and change to black bg and orange text/icon. However to do that I’ll need the icon colour to change in sync with the text and bg colour. Easy to do with the div bg but how can I get the text and icon colour to change when hovering over the div in Cwicly using components?
Thanks
Hi @Brendon,
There are multiple ways to achieve this.
Probably the most flexible way is to set the colour of all of the foreground elements to inherit and then set the color property of the div on hover.
Alternatively, if you want more control, you can use relative styles to target the inner elements on hover of the div.
Finally from next week, if you are using the new Tailwind features, you will be able to use the group feature to do this (as shown by @Louis in the recent live).
Groups (styling.based on parent hover state):
https://www.youtube.com/live/8lkY0qM7vJ0?t=4504
Great thanks @StrangeTech
Both those solutions a little over my css understanding lol. When you say set the colour to inherit. How do I do that exactly. When I modify the component and go to change the colour it opens the colour palette, would I just type in Inherit? And then where does it inherit the colour from?
Cheers
Effectively, yes, you can type inherit directly in to the colour input field, however, it is even simpler than that.
Colours are set to inherit by default, so if you don’t type a colour for your sub-elements, they will automatically inherit from their parents.
Assuming you set the color property on the div on hover, this is where it will be inherited from. As mentioned above, effectively, when elements are set to inherit they inherit from the hierarchical ancestors / containers (parent, grandparent, etc).
There may be some considerations depending on your implementation, here is a very quick demonstration:
Use a global class for your divs (I’ve named this “feature” for the demo) and add your normal and hover colours to it:
Here is what it looks like normally:
Here is what it looks like on hover:
The color property of all descendants is left empty.
Thanks a lot for the explanation @StrangeTech worked! Didn’t realise it was so easy. Is this just default css behaviour or is Cwicly doing something? I was thinking I needed to target the SVG to change the colour.
Standard CSS behaviour. Cwicly is just doing what it does best - allowing us the freedom to utilise the various aspects of web development in WordPress without unnecessary limitations or restrictions.
