V4 Extentions Parent Child Hover Estimated reading: 5 minutes 7 views Hover a card and restyle the things inside it. Change a heading color, a button background or a badge when the whole card is hovered. No code needed. PARENT Any container CHILDREN Any V4 element PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS PRO Active license Tip: Install and activate both Animation Addons plugins before you start. The extension is also called Flexbox Child Hover in some places. Note: In the screenshots, the orange boxes and numbers show you where to click or what to check. HOW IT WORKS The Idea The parent A container, like a card. You turn on Act as hover source. When the mouse is over it, its children are switched on. The children The headings, text, buttons or boxes inside the card. You turn on Respond to parent hover on each one. The hovered look On each child, you style a special state called Parent Hover. This look shows only while the parent is hovered. STEP 1 Enable the Extension Turn on the extension from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Extensions. Open the Elementor V4 (Atomic) tab, then click Interaction. Under Interaction Extensions, turn on Parent Child Hover. Click Save Settings. Parent Child Hover Extension (click to zoom) STEP 2 Set the Parent Choose the container that the visitor will hover, for example your card. Open your page with the Elementor Editor. Select the card. It can be a Flexbox, Div Block or Grid. In the General tab, open the Settings section. Turn on Act as hover source. Choose a Target scope. See the options below. The switch before you turn it on (click to zoom) After you turn it on, Target scope appears (click to zoom) STEP 3 Set the Children Now choose which elements inside the card should react. Select a child, for example the Heading. In the General tab, open the Settings section. Turn on Respond to parent hover. Repeat for every child you want to change. Respond to parent hover (click to zoom) STEP 4 Style the Hovered Look Last, tell each child how it should look while the card is hovered. Select the child and open the Style tab. Next to the local class, click the three dots. Under Heading States (the name follows your element), choose Parent Hover. Change any style you like, for example Background color. Only this hovered look changes. Click Update to save your page. The Parent Hover state (click to zoom) Styling the Parent Hover look (click to zoom) Tip: Choose Normal in the same menu to go back to the normal look. SETTINGS Options Act as hover source Default: OffOn the parent container. When it is on, hovering this container switches on its children. Target scope Default: Direct childrenOn the parent container. Direct children means only the elements placed straight inside the container. All descendants means everything inside, even deeper boxes. Respond to parent hover Default: OffOn each child. Turn it on to use the Parent Hover style. This switch is hidden on a container that is itself a hover source. RESULT Final Result Two cards with the same content. Each has a heading, text, a button, and a nested box inside an inner container. Every child responds and has a Parent Hover style. The frames show the mouse outside, then over the card, then outside again. Direct children The heading, text and button react. The nested box does not, because it sits inside another box. Target scope: Direct children. The nested box stays the same All descendants Everything reacts, including the nested box. Target scope: All descendants. The nested box turns green too GOOD TO KNOW More Details Keyboard focus Focusing something inside the card with the keyboard switches the children on too, the same as hover. Touch screens There is no hover on touch screens, so the Parent Hover look does not stick on phones and tablets. Nearest parent wins If a card sits inside another card, each child follows the nearest parent that is a hover source. Works with any element Any V4 element can be a child, whether it is a box or a widget. A container that is a hover source cannot also respond to another parent. Only loads when used Pages with no hover source do not load any extra script. HELP Troubleshooting I do not see Act as hover source Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) > Interaction and turn on Parent Child Hover. Then reload the editor and select a container. Widgets like headings can only be children, so they show Respond to parent hover only. I do not see the Parent Hover state Turn on Respond to parent hover on that element first. Then open the three dots menu next to the local class in the Style tab. Nothing changes when I hover the card Make sure the card has Act as hover source on, the child has Respond to parent hover on, and you styled the Parent Hover state. Update the page and test on the live page. A deeper child does not react The Target scope is probably Direct children. Change it to All descendants on the parent. You Did It Your card now restyles its children when it is hovered. If you face any problem, please contact our support team. We are happy to help.
