Create a Direction Aware Hover Effect Using CSS :has() Selector

Опубликовано: 17 Июль 2026
на канале: CSS Weekly

5,421

183

A practical guide on how you can build a pure-CSS direction-aware hover effect for your navigation menu bar using :has() pseudo-class.

🔗 Links
Codepen Demo: https://codepen.io/ZoranJambor/full/z...
In-Depth Guide to CSS Logical Properties:    • In-Depth Guide to CSS Logical Properties
Switch to HSL Color Format:    • Switch to HSL Color Format
CSS Stickers: https://stickers.css-weekly.com
In-Depth Guide to CSS Parent Selector :has():    • In-Depth Guide to CSS Parent Selector :has()
Use @supports At-Rule for Feature Detection in CSS:    • Use @supports At-Rule for Feature Detectio...

📖 Chapters
00:00 A note on `:has()` pseudo-class
00:20 HTML & CSS setup for the navigation element
01:03 How to create an animated background slide-up hover effect
04:47 How to create a direction-aware background slide effect using only CSS
09:18 A note on `:has()` support and `@supports` at-rule

Get better with the best linting tools Prettier & Stylelint:
🔥 Mastering Prettier & Stylelint: https://masteringlinting.com/

Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/

Keep up-to-date with CSS Weekly:
👉 Twitter:   / cssweekly
👉 Instagram:   / cssweekly
👉 Facebook:   / cssweekly

Keep up to date with what I'm up to:
🔗 Blog: https://zoranjambor.com
👉 Twitter:   / zoranjambor
👉 LinkedIn:   / zoranjambor

Zoran Jambor
#css