Join the Webstudio community

Updated 2 months ago

How to add a hover effect to the children while hovering on the parent in WS?

At a glance
The community member has a services section on their website with an SVG arrow in a circle div indicating that the service is clickable. They want to change the background color of this div when they hover over the entire service box. The comments suggest using CSS variables to achieve this, and one community member confirms that this approach worked for them after referring to a specific documentation resource. The community members also discuss changing the background image versus the color, and provide some additional tips on how to approach that.
Useful resources
I have a services section on the website. There are an svg arrow in circle div indication that the service is clickable. How can I change this div background color when I hover on the entire service box?
Marked as solution
Set css variable on service box with hover state and use it on arrow
View full solution
B
F
13 comments
Set css variable on service box with hover state and use it on arrow
It changes my div background immediately, not on hover. I know I might be doing something wrong, it's my first time doing this in WS
Do you change background image or color?
For image you need to positinon two boxes at the same place, give them images you want and toggle opacity on each
For color you need to set transition with color property
on icon your change
Yeah, did that)
Well, it works in the builder
But pls check the bugs channel
Add a reply
Sign up and join the conversation on Discord