Child Hover State
Easily add custom styles to text, buttons, links and more when hovering over it's parent element.
Instructions
Firstly, make sure you have the VisualDX script in your <head>. Checkout the Quick Start for how to do this.
Add hover state to child element
Add the attribute vdx-child-hover as a custom attributes Name of a parent element. e.g. a button. You can so this with a Link Block, Div, or Custom Element.
Add the class vdx--hover as a combo class the child elements of the Link Block, Div, or Custom Element that you wish to style when the user hovers over the parent. (see step 1)
button_text vdx--hoverAdd styles to the combo class vdx--hover. These styles will become visible when the use hovers over the parent element.
.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.
Remove combo class vdx--hover from the style selector and publish