Interaction extension · Pro
Hover anywhere on a card and its title changes colour, its icon shifts and its button fills, together. Parent Child Hover gives the children of a Flexbox a "Parent Hover" state you style without writing CSS selectors.
The short answer
Parent Child Hover is an Animation Addons for Elementor extension that lets you hover a parent container and change its child elements in Elementor 4. You mark a Flexbox as the hover source and the elements inside it as hover targets, then style each target's "Parent Hover" state, so hovering anywhere on the container restyles the children together.
| Plan | Pro Animation Addons Pro |
|---|---|
| Type | Interaction extension: adds a hover relationship to elements you already use |
| Works on | Elementor 4 Flexbox containers (the hover source) and their children (the hover targets) |
| How it works | Container = hover source; child = hover target; the child's "Parent Hover" style state applies while the container is hovered |
| Switch | Parent Child Hover toggle under Animation Addon > Settings > Extensions |
| Requires | Animation Addons for Elementor (free) + a licensed Animation Addons Pro |
| Limits | Flexbox containers only (wrap Div Block or Grid content in a Flexbox); hover needs a pointer, so treat it as an extra on touch screens; check the effect in Preview |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Every demo uses Parent Child Hover from Animation Addons Pro on Elementor 4's own elements. The settings on each card are a good place to start.
A row of three cards. Hovering anywhere on a card turns its title orange and shifts its arrow icon to the right.
A grid of post cards. Hovering a card brightens its photo and underlines the post title, so readers can see which card they are about to open.
Portrait cards where the name and role sit faint under the photo; hovering the card makes both fully visible and lifts them slightly.
Hovering a plan column turns its plan name blue and fills its outline button.
Large tiles with a photo and a label. On hover the label turns from white to black and the photo brightens.
Full-width rows. Hovering a row tints its icon, darkens its name and fades in "Book" on the right.
Features
Every point below is a real control in the Parent Child Hover panel section or part of how it works. Nothing here needs custom code.
Visitors do not have to find the title or the button. Any point on the Flexbox triggers the change, which suits cards made clickable as a whole.
The title can change colour while the image brightens and the button fills. Each target has its own Parent Hover styling, so one hover drives several different changes.
You style the Parent Hover state with the same style properties you already use, such as colour, background, opacity, filter and transform. There are no CSS selectors to remember and nothing breaks when a class name changes.
Step by step
Six steps from switching it on to publishing. The bold names are the exact labels you will see on screen.
Get Animation Addons ProInstall Animation Addons for Elementor and activate Animation Addons Pro, then check that Parent Child Hover is on under Animation Addon > Settings > Extensions.
Build the card as a Flexbox container with the elements inside it: a heading, an image, an icon or a button.
Select the Flexbox and set it as the hover source.
Select each child that should react and set it as a hover target.
Style each target's Parent Hover state, for example its colour, background, opacity or transform.
Open Preview and hover different parts of the card to check that every child reacts together.
Honest comparison
What each option has, side by side. Where the other choice is the better fit, we say so.
| Feature | Elementor 4 Hover state | Custom CSS (.card:hover .title) | Animation Addons Parent Child Hover |
|---|---|---|---|
| Hovering the container restyles children | No, it styles only the element being hovered | Yes | Yes |
| Writing code | None | CSS selectors | None |
| Where it is set up | Style tab states | Elementor Pro Custom CSS or the free Animation Addons Custom CSS extension | Hover source, hover target and the Parent Hover state |
| Cost | Free in Elementor | Free with Animation Addons Custom CSS | Animation Addons Pro |
Compared with Elementor 4.3.3 (September 2026).
Elementor 4's Hover state is right when a button should react to its own hover. When the reaction belongs to the whole card, Parent Child Hover does it without code. If you are comfortable with CSS, the free Custom CSS extension can write a :hover rule instead.
Who it's for
The people who get the most out of it, and what they use it for.
Building service, case-study and team cards that react as one unit.
Highlighting the pricing plan a visitor is considering.
Making category tiles feel clickable.
Who want polished hover cards without maintaining CSS.
FAQ
In Elementor 4, install Animation Addons Pro and switch on Parent Child Hover. Select the Flexbox card and set it as the hover source, set each inner element as a hover target, then style each target's Parent Hover state. Hovering anywhere on the card now restyles those children together, with no CSS to write.
In Elementor 4, a Hover state styles only the element under the cursor, so a heading changes colour only when you hover the heading itself. Animation Addons Parent Child Hover solves this by giving children a Parent Hover state that applies whenever the cursor is anywhere on their parent Flexbox.
Animation Addons Parent Child Hover applies to Elementor's Flexbox container and its children; for a Div Block or Grid card, wrap the content in a Flexbox and make that the hover source. It needs a licensed Animation Addons Pro, and because hover needs a pointer, check the result in Preview and treat it as an extra on touch screens.
Touch screens have no true hover. Many mobile browsers apply hover styles when an element is tapped, so a card may restyle on tap, but do not rely on it. Keep titles, prices and buttons visible without hover, and use the Animation Addons Parent Hover state as a visual extra, never the only way to find a link.
No for SEO: Animation Addons Parent Child Hover only changes styles, so every heading, text and link stays in the page for search engines. For accessibility, keep enough colour contrast in both the normal and Parent Hover states, and never hide essential content until hover, so keyboard and touch visitors still see everything.
Yes, on different moments of the same card. Animation Addons Regular Animation plays the card's entrance on scroll, Tilt adds a 3D lean to the container as the cursor moves, and Parent Child Hover restyles the children while the card is hovered. Test the combination in Preview to make sure the motion does not feel busy.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
What works well with Parent Child Hover on the same page or template.
Hover a Flexbox and style the elements inside it in Elementor 4, with no code. Need something free right now? The free Custom CSS extension can hold a .card:hover .title rule.
