Have you ever wanted to create an inverted hover effect?
I’ll show you how with just 2 extra lines of CSS!
No hacks. No JavaScript. Just the power of :has().
For years, CSS couldn’t style parent elements based on their children. But now, :has() changes the game.
Hover over an element, and :has() lets the parent react, applying styles to everything else.
- No extra HTML.
- No complex workarounds.
- Just a clean, native way to control interactions.
The result? A smooth hover effect that shifts focus exactly where you want it. And this is just one use case.
With :has() you can also:
- Build dark mode toggles.
- Improve form validation styles.
- Create advanced parent-child interactions.
- Enhance focus and selection effects.
- And more…
With over 93% browser support, it’s pretty safe to use.
<ul class="cardlist">
<li class="card">...</li>
<li class="card">...</li>
<li class="card">...</li>
<li class="card">...</li>
</ul>.cardlist:has(.card:hover) .card:not(:hover) {
filter: blur(4px);
}Full code available here: https://codepen.io/emgarf/pen/VwJryJK
To learn more tips about CSS, make sure to join my newsletter below ❤️
