Mochamad Romadoni
Mochamad Romadoni

Reputation: 1

Hover child inside parent and affect other child inside other parent too (sibling parent)

I have question about hovering sibling other child, here is my code:

<div class="parent">
  <div class="child">
</div>
<div class="parent">
  <div class="child">
</div>
<div class="parent">
  <div class="child">
</div>

I try this style code, is working, but i found some problem

.parent:has(.child:hover) ~ .parent .child {
  background-color: red;
}

The problem is, when the 1st child is hovered, all the other child (the 2nd and 3rd) is hovered too, but when I hover the 2nd child, only the 3rd is hovered, the 1st child is not affected... Can you please help me solving the problem, thank you.

Upvotes: 0

Views: 16

Answers (0)

Related Questions