如何在 TailwindCSS 中获得可悬停（底部）导航菜单

Question

我正在尝试在 TailwindCSS 中构建一个水平底部菜单导航栏，在其上方显示适当的 div 项目。

div 项目应与导航栏宽度相同，并与其对齐。

所需的悬停效果：https://nl.pinterest.com/pin/615093261639733146/

我有以下显示效果的简约代码：

<div class="bg-red-50 w-full h-64">Some stuff above the menu div</div>
  
<div class="grid grid-cols-3 h-10 w-96 bg-red-50 mt-4 mx-auto relative">
    <div class="peer/menu1 cursor-pointer bg-yellow-50 w-32">
      Menu 1
    </div>
    <div class="peer/menu2 cursor-pointer bg-blue-200 w-32">
      Menu 2
    </div>
    <div class="peer/menu3 cursor-pointer bg-green-100 w-32">
      Menu 3
    </div>
    <div class="invisible absolute z-50 peer-hover/menu2:visible col-span-3 bottom-10 p-4 bg-gray-100 w-full">
      <p>Menu items 2</p>
      <p>Some more text</p>
    </div>
    <div class="invisible absolute z-50 peer-hover/menu3:visible col-span-3 bottom-10 p-4 bg-gray-100 w-full">
      <p>Menu items 3</p>
      <button class="px-2 py-1 rounded-lg m-2 bg-red-50">Button</button>
      <p>Some more text</p>
    </div>
</div>

上述代码的 Tailwind Play 链接：https://play.tailwindcss.com/Mi3hHFFEdw

问题：一旦我尝试输入在例如之后显示的 div将鼠标悬停在菜单 3 上，div 消失...

Answer 1

您希望通过添加

<div>

类来使

hover:visible

元素在悬停时保持可见：

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div class="bg-red-50 w-full h-64">Some stuff above the menu div</div>
  
<div class="grid grid-cols-3 h-10 w-96 bg-red-50 mt-4 mx-auto relative">
    <div class="peer/menu1 cursor-pointer bg-yellow-50 w-32">
      Menu 1
    </div>
    <div class="peer/menu2 cursor-pointer bg-blue-200 w-32">
      Menu 2
    </div>
    <div class="peer/menu3 cursor-pointer bg-green-100 w-32">
      Menu 3
    </div>
    <div class="invisible absolute z-50 peer-hover/menu2:visible hover:visible col-span-3 bottom-10 p-4 bg-gray-100 w-full">
      <p>Menu items 2</p>
      <p>Some more text</p>
    </div>
    <div class="invisible absolute z-50 peer-hover/menu3:visible hover:visible col-span-3 bottom-10 p-4 bg-gray-100 w-full">
      <p>Menu items 3</p>
      <button class="px-2 py-1 rounded-lg m-2 bg-red-50">Button</button>
      <p>Some more text</p>
    </div>
</div>