Question

在这里，我的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 />

有人知道如何从Box上的悬停中定位两个BoxTwo吗？

似乎不是possible。我可以定位一个之后的目标，而不是之前的目标

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选择器才起作用。

在悬停CSS上隐藏不是直接子元素的元素

1 个答案: