How to target the child element on the hover of parent element?

Hi :slight_smile:

How can I do this with Webflow ?

<div class="parent-container">
<div class="my-child-element">...</div>
</div>

.my-child-element { display: none; }
.parent-container:hover my-child-element { display: block; }

On the “Hover” of the parent element, the child element displays.

Thanks :slight_smile:

Ok, I solved the problem in the “Custom Code”.

You can do it with interactions
look at the video tutorials

You can do it without custom code.

With interactions, add a Hover event, check the “Affect different element(s)” box and type in the class given to your other and hidden element. (Then I guess, adjust the opacity to 100%)

http://cl.ly/image/231H3620413N

1 Like

We’re also looking at adding this natively relatively soon, so you’ll be able to achieve this with CSS without resorting to interactions. It’ll work somewhat similar to the Product Grid example on the CSS Playground: http://playground.webflow.com/ (notice the “when located in” wording in the UI). For the time being, the Custom Code and Interactions approaches could be used as a workaround. Thanks for your patience!

@callmevlad is this the new UI for the upcoming Webflow? I’m loving it!

It’s the very old UI that was for playground. I remember it from a year ago :wink: Beside, there is nothing more than on the current one. There is even less.

I thought of that afterwards. For whatever reason I thought they condensed it. Still like the phone and tablet previews however!

Actually there is a lot more! Haha. We just removed the media query device previews and this selector widget.