00:00
Buy Me a Beer
Animations

Child Hover State

Easily add custom styles to text, buttons, links and more when hovering over it's parent element.

Hover over me
.button_child.vdx-hover

Instructions

Firstly, make sure you have the VisualDX script before your </body>. Checkout the Quick Start for how to do this.

Add hover state to child element

1

Copy this attribute:

Copied!
vdx-child-hover
2

Paste the attribute to the custom attributes Name of a parent element. e.g. a button.

You can so this with a Link Block, Div, or  Custom Element.

button_parent
.button_child.vdx-hover
button_parent
Style
Settings
Interactions
Custom Attributes
Name
vdx-child-hover
Value
3

Copy this combo class:

Copied!
vdx--hover
4

Paste the combo class into the Style Selector of the styled child element(s). e.g. the button text

You can add the combo class all child elements nested in parent.

Style the combo class vdx--hover.

These styles will become visible when the use hovers over the parent element once the website is published.  

button_child
.button_childvdx-hover
button_child
Style
Settings
Interactions
Style Selector
button_child
vdx--hover
7

Remove combo class vdx--hover from the style selector and publish

.button_child.vdx-hover

.notice {!important}

How to save your combos classes.

Copy the vdx-child-hover element with with all combo classes added and save it to your style guide. This is ensure that you do not lose the combo classes when you use the Webflow class cleaner.

Sponsor the Magic and
Buy Me a Beer

Ailín Tobin
Ireland

VisualDX is a free JavaScript library made for Webflow nerds like yourself. No ads, no paywalls—just pure, unfiltered JavaScript magic to supercharge your builds. If it’s saving you time, making your development easier, or just making you feel like a wizard in the Webflow Designer, consider slinging a virtual coffee my way.

Think of it like buying me a pint for keeping your Webflow spells flowing.

You can support it here.

Cheers, legend!

This is a method based on community and soundness. If you can't afford it, don't worry... One of your fellow Webflow nerds has already helped you out by donating.