使用顺风 css 在悬停时定位下一个兄弟姐妹

Question

我试图隐藏一个元素，直到它的前一个兄弟悬停在它上面，在 css（或者更确切地说是 scss）中，它看起来像这样：

.menu-container {
  // style with flex etc...
  & .menu-item-link {
    // style the link...
    &+.sub-menu-container {
      display: none;
    }
    &:hover+.sub-menu-container {
      display: block;
    }
  }
}

<ul class="menu-container">
  <li class="menu-item-container">
    <a class="menu-item-link">Ingredients</a>
    <ul class="sub-menu-container">
      <li class="sub-menu-item-container">
        <a class="sub-menu-link">Fruits</a>
      </li>
      <li class="sub-menu-item-container">
        <a class="sub-menu-link">Vegetables</a>
      </li>
      <li class="sub-menu-item-container">
        <a class="sub-menu-link">Dairy</a>
      </li>
      <li class="sub-menu-item-container">
        <a class="sub-menu-link">Children</a>
      </li>
    </ul>
  </li>
</ul>

如何使用顺风实现这一目标？

Answer 1

您实际上并没有尝试在代码中定位同级元素，而是尝试定位子元素。当您只想显示一个子菜单下拉菜单时，这是一个非常简单的过程。

只需将group 添加到悬停触发器（在您的情况下为.menu-item-link）并将group-hover:[some-display-class] 添加到孩子。这样，当父元素（或自身）悬停时，子元素将更改其显示属性。

您应该更改您的标题，而且我建议您不要将 Tailwind 与此类名称一起使用。请参阅 extracting components 了解使用 Tailwind CSS 的推荐方式。当然，您可以随意使用它，但如果您想使用 SCSS 和类似的类，最好使用普通的旧 CSS。

结构示例：

<ul>
  <li class="group">
    <a>Ingredients</a>
    <ul class="hidden group-hover:block">
      <li>
        <a>Fruits</a>
      </li>
      <li>
        <a>Vegetables</a>
      </li>
      <li>
        <a>Dairy</a>
      </li>
      <li>
        <a>Children</a>
      </li>
    </ul>
  </li>
</ul>

Tailwind Play 示例https://play.tailwindcss.com/dFc2zlmqDA