Скачать или смотреть Animating Background Elements in SVG by Hovering on Foreground Using CSS :has()

Learn how to precisely animate background SVG elements only when hovering over a foreground element using the modern CSS :has() selector with practical examples.
---
This video is based on the question https://stackoverflow.com/q/79485511/ asked by the user 'Alan' ( https://stackoverflow.com/u/6149941/ ) and on the answer https://stackoverflow.com/a/79485563/ provided by the user 'Ori Drori' ( https://stackoverflow.com/u/5157454/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Trying to animate background element by hovering foreground element in SVG. I suspect I need :has() for that but can't figure out how

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to drop me a comment under this video.
---
The Challenge: Scoped Animation on Hover in SVG

When working with SVG animations triggered by hover, a common issue arises when you want only certain elements to animate upon hovering over a specific part of the SVG. For example, you might want a smaller foreground square to trigger animations on itself and a larger background square — but not when hovering anywhere else.

The Problem

In the original setup, hovering anywhere on the SVG caused both squares to pulsate.

The goal is to limit this pulsation effect to when the smallest square is hovered.

Attempting to use :has() selector directly on the large square targeting the small hover failed because of element hierarchy.

Understanding Why the Initial Approach Fails

The large and small squares are siblings inside a .wrapper group:

.rect_small and .rect_large are not parent-child but sibling elements.

The CSS pseudo-class :has() checks for descendants, so using .rect_large:has(.rect_small:hover) does not work because .rect_small is not inside .rect_large.

The Correct Approach: Use :has() on the Parent Container

Since both squares share a common parent .wrapper, you can leverage the :has() selector on .wrapper to react to hover states of .rect_small:

[[See Video to Reveal this Text or Code Snippet]]

Explanation

.rect_small:hover triggers the animation on the small square directly.

.wrapper:has(.rect_small:hover) checks if the .rect_small is hovered and then applies the animation on .rect_large.

Full Example

[[See Video to Reveal this Text or Code Snippet]]

[[See Video to Reveal this Text or Code Snippet]]

Browser Support Note

The CSS :has() selector is a relatively new addition but is supported in most modern browsers.

Check compatibility if you target older browser versions.

Summary

Use :has() on the common parent of elements to trigger sibling animations based on hover.

Direct usage of :has() on sibling elements does not work if the hovered element is not a child.

This approach cleanly scopes animations without JavaScript or complex selectors.

This technique modernizes hover-based SVG animations, improving UX by limiting effects to relevant areas.