Javascript 隐藏悬停css上不是直接子级的元素

我的css知识在这里有一个缺口。当另一个元素使用样式化组件悬停在上面时，我试图隐藏一个元素

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 />

有人知道如何从悬停框中瞄准两个box2吗

---

看起来不是。我可以选择后面的，但不能选择前面的。您可以使用

+

选择器：

#内框{
背景：绿色；
高度：20px；
宽度：20px；
保证金：0自动；
}
#第二箱{
高度：40px；
宽度：40px；
背景：红色；
}
#盒子{
高度：40px；
宽度：40px；
背景：粉红色；
}
#框：悬停#内框，
#框：悬停+#框二{
显示：无；
}

---

您可以使用

+

选择器：

#内框{
背景：绿色；
高度：20px；
宽度：20px；
保证金：0自动；
}
#第二箱{
高度：40px；
宽度：40px；
背景：红色；
}
#盒子{
高度：40px；
宽度：40px；
背景：粉红色；
}
#框：悬停#内框，
#框：悬停+#框二{
显示：无；
}

可能重复的

Box:hover~BoxTwo.InnerBox

您可能需要为正在使用的框架添加标记，因为这不是标准的CSS或JavaScript。您是将鼠标悬停在InnerBox还是框上？一个是可能的，另一个不是CSS@HereticMonkey我更新了标签。我在问题[code>Box:hover~BoxTwo]的可能重复项中提到了它。InnerBox您可能需要为正在使用的框架添加一个标记，因为这不是标准CSS或JavaScript。您是在InnerBox上还是在框上悬停？一个是可能的，另一个不是CSS@HereticMonkey我更新了标签。我在问题中提到了好吧，酷，这很有效。如果它放在元素前面呢？我需要更新问题slightly@peterflanagan不，CSS不会倒退。@peterflanagan我恐怕你不能只用CSS来做。天哪，CSS:-Dok，酷，这行得通。如果它放在元素前面呢？我需要更新问题slightly@peterflanagan不，CSS不会倒退。@peterflanagan我担心你不能只使用CSS。天啊，该死的CSS:-D