Question

当用户将鼠标悬停在元素上时，我正在尝试将所有div的“下面两层以下”设置为display: block。但是，以下代码有效，我只想定位向下两层的两个div。我需要更新以仅定位向下两层的divs的原因，因为这是一个多级下拉菜单，所以html是递归生成的。

我的代码如下，任何问题都让我知道。

const ListItem = styled(div)`
   position: relative;
   &:hover {
      & * {
        display: block;
      }
   } 
`

... Component ....
return (
   <ListItem>
      <p>Example</p>
      <div className='wrapper'>
          // I want to set these 2 divs to `display: block`
          <div style={{display: 'none'}}>
            <p>One</p>
          </div>
          <div style={{display: 'none'}}>
              <p>Two</p>
          </div>
      </div>
   <ListItem>
);

Answer 1

这应该可以解决问题

const ListItem = styled(div)`
   position: relative;
   &:hover {
      & > .wrapper > div {
        display: block;
      }
   }
`

Answer 2

可以给ListItem一个类或ID吗？然后，我将只使用简单的CSS代码，该代码可以按以下方式工作：

<ListItem className='list'>
  <p>Example</p>
  <div className='wrapper'>
      <div>
        <p>One</p>
      </div>
      <div>
          <p>Two</p>
      </div>
  </div>
<ListItem>

CSS：

.list .wrapper > div {
  display: none;
}

.list:hover .wrapper > div {
  display: block;
}

定位到以下两层的所有div

2 个答案: