скрыть элемент на hover css, который не является прямым потомком

Question

Здесь есть пробел в моих знаниях CSS.Я пытаюсь скрыть элемент, когда другой элемент находится при использовании styled-компонентов.

const InnerBox = styled.div`
   background: green;
   height: 20px;
   width: 20px;
   margin: 0 auto;
`

const BoxTwo = styled.div`
   height: 40px;
   width: 40px;
   background: red;
`

const Box = styled.div`
   height: 40px;
   width: 40px;
   background: pink;
   // This works as InnerBox is in Box
   &:hover ${InnerBox} {
     display: none; 
   }
   // This doesn't work as BoxTwo is not in Box
   &:hover ${BoxTwo} {
     display: none; 
   }
`

Мой jsx выглядит так:

<BoxTwo />
<Box>
    <InnerBox />
</Box>
<BoxTwo />

Кто-нибудь знает, как нацелить эти дваBoxTwo от наведения на Box?

Похоже, это не возможно .Я могу нацелиться на один после, но не на тот, что раньше

Answer 1

Вы можете использовать селектор +:

#innerBox {
   background: green;
   height: 20px;
   width: 20px;
   margin: 0 auto;
}

#boxTwo {
   height: 40px;
   width: 40px;
   background: red;
}

#box {
   height: 40px;
   width: 40px;
   background: pink;
}

#box:hover #innerBox,
#box:hover + #boxTwo {
  display: none; 
}

<div id="box">
  <div id="innerBox"></div>
</div>
<div id="boxTwo"></div>

В вашем случае это будет:

&:hover + ${BoxTwo} {
  display: none; 
}

Селектор + будет работать только тогда, когда элемент (BoxTwo)помещается сразу после родительского селектора (Box).