Join the Webstudio community

Updated 8 months ago

Change the text color of blog post title when the link element is hovered

At a glance

The community member has a list of clickable blog post previews and wants to change the color of the blog post title when a link element is hovered. They asked how to achieve this with Webstudio. The comments indicate that Webstudio will support this pattern using CSS variables instead of descendant selectors, which can be difficult to maintain. Currently, this can be achieved using custom CSS via embed, and with variables, it will be easy.

Useful resources
Hello. Apologies if this has been asked and answered before. I did a quick search before posting this, but couldn't find anything.

Here's the idea: I have a list of clickable blog post previews. When a link element is hovered, I would also like for the blog post title to change color. If I were to write plain CSS, it would go something like this (if memory serves me well πŸ˜…):

.card-link:hover h2 { color: #F26D13 }

How to achieve this with Webstudio?

Here's a link to the build: https://apps.webstudio.is/builder/8ee196b0-56f8-42d7-b62c-28c9f1b0f30c?authToken=f75a1c76-45a5-402c-9a72-897770257ab0&mode=preview
Attachment
CleanShot_2024-06-28_at_16.24.532x.png
O
D
4 comments
We will support this pattern using css variables instead of descendant selectors. Descendant selectors are a known pain for maintenance as by doing this in complex case you would potentially reach into any nested child. Its a pandora box we are unwilling to open
So right now this is difficult, can be achieved using custom css via embed
with variables, this will be easy.
Thanks @Oleg Isonen
I wanted to make sure I wasn't missing something. Good to know this will be supported and in a sustainable way πŸ‘Œ
Add a reply
Sign up and join the conversation on Discord