Configure parent hover effects

Parent hover changes the style of one or more child blocks when the visitor hovers over their parent. It can coordinate effects across a card, banner, column, or another group of nested content.

Set up parent hover

1. Select the parent Row, Column, Container, or Full width section.
2. Open Advanced -> Misc and enable Parent for hover.
3. Select a child block that should react when the parent is hovered.
4. Open a supported style control, such as color, background, border, box shadow, transforms, or opacity.
5. Choose the Parent hover state and configure the required value.
6. Repeat the child-block steps for any additional elements that should change together.

Banner and Info box blocks already act as hover parents for their nested content, so their child blocks can use Parent hover without enabling the option manually.

For example, a Container background can change from light to dark while its Title, Paragraph, and Button change to lighter colors. You can also rotate an Info box icon or move an image when the parent is hovered.