How to set parent hover

Most of the options for blocks that set color, background, border, box-shadow, transform, and opacity have several states under which they will be applied: Normal, Hover, and Parent hover. While Normal and Hover are commonly used states that do not require explanation, Parent hover needs to be described in more detail.

Parent hover allows setting the state of the selected block when hovering over the parent block, which will be specified using the parent option “Parent for hover” (located in the Advanced tab → Misc section) only in those blocks that can contain other blocks, such as Row, Column, Container, and Full-width section. It is also important to know that some elements, such as Banner or Info box, automatically become parent blocks for their child’s content.

This method will allow for numerous interesting effects that will occur simultaneously with one or several child blocks when hovering over the parent block. For example, when hovering over a container, its background will change from light to dark, and the child blocks of the title, text, and button will change their color from dark to light. Or when hovering over an Info box block, the icon inside it will rotate clockwise around its axis.