Uploaded March 2023 | Updated September 2026, 2 hours ago

---

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: codepen.io/ZoranJambor/full/zYJowBQ
In-Depth Guide to CSS Logical Properties: youtu.be/cV9JhEV4Ll0
Switch to HSL Color Format: youtu.be/VInSzHOeFkE
CSS Stickers: stickers.css-weekly.com
In-Depth Guide to CSS Parent Selector :has(): youtu.be/OqLquBs-bEg
Use @supports At-Rule for Feature Detection in CSS: youtu.be/9iH3z6M6FOI

📖 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: masteringlinting.com

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

Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly

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

- Zoran Jambor
#css