:hover applies even when the grid gap is hovered. Any way to fix it through CSS?

I’ve been working on a grid exercise and ran into an annoying issue. The goal is for all cards to have a default opacity of 1. When a card is hovered, its opacity should stay at 1, while every other card fades to 0.5. https://codepen.io/NotNegative/pen/LEpMKNB However, hovering the gap between the cards still applies the "hover effect" somehow. I know this can be fixed through javascript, which is what I did, but is there a CSS way to bypass that?
3 Replies
Kevin Powell
Kevin Powell3mo ago
Update the selector on line 15, so that it only kicks in when you are hovering on one of the children:
.popular-categories:has(> :hover) .category-card:not(:hover) {
opacity: 0.5;
}
.popular-categories:has(> :hover) .category-card:not(:hover) {
opacity: 0.5;
}
Keita & Akira
Keita & AkiraOP3mo ago
Fuck, the solution was so easy. That's my bad for not having been able to properly find it Sorry for the waste of time and giga-thanks a lot for the help as usual, wish you a wonderful day and weekend
13eck
13eck3mo ago
Please don't apologize for asking for help. It's what we're here for! Even Kevin asks for help sometimes! https://discord.com/channels/436251713830125568/1412871684113039623 😉

Did you find this page helpful?