Implementing a Hover Effect on a Sibling Element inside a Webflow Component (Light/Dark Variant)

Design help Custom code
1

Hi everyone,

I’m currently facing the following scenario in Webflow and would love to hear your thoughts and best practices:

I’ve built a blog grid as a “Component” with different Variants. In this Component there are two Variants: Light and Dark.

The simplified markup looks like this:

<div class="post_item w-dyn-item">
  <a class="post_item-link w-variant-<VARIANT-ID>">…link content…</a>
  <div class="post_item-content w-variant-<same-VARIANT-ID>">
    …content…
  </div>
</div>

Each variant has its own default background and text colors.

Desired Behavior:
On hover over the .post_item-link, only the .post_item-content should change:

Dark Variant → Content background to var(–color–background–light-dark)
Light Variant → Content background to var(–color–background–light-opacity)

Preferably solved entirely within the Component, without external embed CSS or JavaScript.

Approaches I’ve Tried
Webflow Pseudo-State (Hover) + Select child

It doesn’t work in the Component because I can’t target the content element as either a child or a sibling of the link using Webflow’s designer UI.

I’ve tried custom CSS with ~ or +

.post_item-link.w-variant-dark:hover + .post_item-content { … }
.post_item-link.w-variant-light:hover ~ .post_item-content { … }

Doesn’t pick up in my real structure, even with !important.

JavaScript in an Embed: Works perfectly via mouseenter/mouseleave, but feels like overkill when I’d prefer a pure styling solution.

Is there a way to target a sibling element purely via Webflow Designer styles (Component Variants + Pseudo-States)? - Do you have any tricks for handling sibling targeting inside a Component without external embeds? Or do you always fall back to custom code/interactions for cases like this? How do you organize and maintain that approach in larger projects?

I’m excited to hear your ideas, workarounds, or examples!

My ReadOnly Link:

2

Hello @Sascha_Thiel, welcome to the community!

I don’t know if I’m understanding your question correctly, but if you want to select siblings of an element without custom css/javascript/interactions then the answer is no, you can’t do that just with the Webflow designer. I would recommend using custom css, maybe trying the :has() pseudo class with your :hover, that way you focus on the parent and depending on the variant you can style accordingly. I hope this helps!

3

Absolutely spot-on—that’s exactly what solved it!
I added a small custom-CSS block that uses :has() together with :hover, and it now styles the sibling .post_item-content perfectly for each variant.

.post_item-content {
	transition: background-color .2s ease-in-out;
}

/* Dark-Variante (Base) */
.post_item:has(> .post_item-link:hover)
	.post_item-content {
		background-color: var(--color--background--lighter-dark);    
}
  
/* Light-Variant */
.post_item:has(> .post_item-link.w-variant-4e38f7f1-6595-7140-764e-c4fd0d886c94:hover)
	.post_item-content.w-variant-4e38f7f1-6595-7140-764e-c4fd0d886c94 {
		background-color: var(--color--background--light-opacity);
}

In my setup the Dark variant is the base variant, so I don’t need to attach a w-variant combo class there.

Thanks for steering me in the right direction!

1 Like
4

Awesome @Sascha_Thiel, I’m glad I was able to help you! Best of luck with your site.