How can I target child on hover of parent when child has sibling with specific class?

13/04/2024 Kiến thức lập trình

Given the following HTML:

<div class="parent">
  <div class="inner__1"></div>
  <div class="inner__2 hidden"></div>
</div>

When I hover .parent, I’d like to change the background color of .inner_1 only when .inner__2 has the .hidden class.

I tried the following with no success:

.parent:hover>.inner__1:has(~ .inner__2.hidden) {
  background-color: red;
}

How can I make sure that hovering the parent changes the background color of the <div class="inner__1" only when <div class="inner__2" has the added class .hidden?

LEAVE A COMMENT Hủy