How do i achieve this? i experimented with has() property and im facing difficulties

https://codepen.io/avinash-tallapaneni/pen/QWPVRzg im unable to target previous siblings, is there a way to code this without using 3rd party library?

CodePen

...

2 Replies

Mannix•8mo ago

YouTube

Looking to step up your CSS game? I have free and premium courses 👉 https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=bubblehover 🔗 Links ✅ Finished code: https://codepen.io/kevinpowell/pen/ZEZQzgq ⌚ Timestamps 00:00 - Introduction 01:05 - The HTML 01:25 - Basic styling 03:12 - Creating the grid 06:17 - Animatin...

You basically need to to this:

button:has(~ button:hover) {
 transform: translateX(-15px);
}

button:has(~ button:hover) {
 transform: translateX(-15px);
}

That will check if any of the buttons after each button has "hover". However, bear in mind that :has() is not yet available to all browsers.