Hover Effect on siblings

How would I go about making a hover effect for when I hover over one element the elements siblings text color would change. so far I have this but not sure if im even starting at the right place. https://codepen.io/ReallPanda_/pen/dyKoNdJ
5 Replies
croganm
croganm3y ago
Well it seems to work in the codepen! Were you going for a different effect? @froggypanda
MarkBoots
MarkBoots3y ago
yep, that seems correct. but it will only select the next siblings, not the previous ones. the latest chromium browers now have the :has() selector which you can use. But it's maybe a bit too early for production
div:has(.test:hover) > .test:not(:hover) {
color: red;
}
div:has(.test:hover) > .test:not(:hover) {
color: red;
}
an alternative is
div:hover > .test:not(:hover){
color: red
}
div:hover > .test:not(:hover){
color: red
}
but this will also trigger when you for example hover the padding of the div, so it's not for all use cases
croganm
croganm3y ago
I've been wanting to recommend :has for a lot recently but it's so new I've kind of avoided it
MarkBoots
MarkBoots3y ago
you can mention it, let the people know it is coming. Let them get used to it
★𝖕𝖆𝖓𝖉𝖆☆
awesome thank you guys!
Want results from more Discord servers?
Add your server