使用Tailwind CSS实现悬停前序元素时显示相邻下一个兄弟元素的方法

实现方案 #

你要的相邻兄弟元素悬停触发展示的效果，Tailwind 原生支持无需额外写自定义 CSS，用peer标记触发元素即可，完全匹配你原有 SCSS 的逻辑：

<ul class="menu-container">
  <li class="menu-item-container">
    <!-- 给作为触发源的前一个相邻元素加 peer 类 -->
    <a class="menu-item-link peer">Ingredients</a>
    <!-- 子菜单默认隐藏，peer 元素悬停时展示 -->
    <ul class="sub-menu-container hidden peer-hover:block">
      <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>

逻辑说明 #

• peer类的作用是将当前元素标记为同级后续元素的状态参考源
• 子菜单加hidden对应你原有代码的display: none默认隐藏逻辑
• peer-hover:block等价于你写的&:hover+.sub-menu-container { display: block; }选择器效果，完全匹配需求

可选优化 #

原有实现存在鼠标从链接移到子菜单过程中，子菜单会自动收起的体验问题，如果要修复可以把触发逻辑移到父容器上，写法更简单：

<ul class="menu-container">
  <!-- 父容器加 group 类 -->
  <li class="menu-item-container group">
    <a class="menu-item-link">Ingredients</a>
    <!-- 父容器悬停时展示子菜单，鼠标停在子菜单区域也不会收起 -->
    <ul class="sub-menu-container hidden group-hover:block">
      <!-- 子项内容不变 -->
    </ul>
  </li>
</ul>

内容的提问来源于stack exchange，提问作者87percentrum