Change the text color of blog post title when the link ...

At a glance

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

4 comments

OOleg Isonen

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

OOleg Isonen

So right now this is difficult, can be achieved using custom css via embed

OOleg Isonen

with variables, this will be easy.

DDavor

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

Join the Webstudio community

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