时间戳

首页 > 解决方案 > 将所有 div 定位到以下两层

css - 将所有 div 定位到以下两层

问题描述

display: block当用户将鼠标悬停在元素上时，我正在尝试将所有 div 设置为“以下两层” 。但是，以下代码有效，我只想针对两个向下的两个 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>
);

标签： cssstyled-components

解决方案

这应该可以解决问题

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

推荐阅读