使用 tailwind 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>

如何使用 tailwind 实现此目的？

Answer 1

您实际上并不是在尝试以代码中的同级为目标，而是在尝试以 child 元素为目标。当您只想显示 sub-menu 下拉列表时，这是一个非常简单的过程。

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

你应该改变你的标题，我也建议你不要使用带有 class 这样名字的 Tailwind。请参阅 extracting components 以了解使用 Tailwind CSS 的推荐方式。当然，你可以随心所欲地使用它，但如果你想像那样使用 SCSS 和 classes，最好使用普通的 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 播放示例 https://play.tailwindcss.com/dFc2zlmqDA

使用 tailwind css 定位下一个悬停的兄弟姐妹

Targetting next sibling on hover with tailwindcss

css

tailwind-css