css 顺风导航栏下拉菜单在选择前消失

vlf7wbxs  于 2023-04-01  发布在  其他
关注(0)|答案(1)|浏览(140)

我有一个个人资料图片导航栏。当鼠标悬停在个人资料图片,我希望出现一个下拉菜单,允许用户选择注销链接。现在的问题是,当鼠标悬停在个人资料图片弹出工程。一旦鼠标离开个人资料图片做选择,下拉菜单消失。
我已经遵循了this stackoverflow question的建议,使用了group和group-hover,但我的问题仍然存在。我是Tailwindcss的新手,下面是我的完整html模板代码:

<nav class="bg-sky-50">
  <div class="flex justify-center">
    <img class="block w-auto h-[13rem] lg:hidden" src="{{company.company_logo.url}}" alt="Pokestop logo">
    <img class="hidden w-auto h-[13rem] lg:block" src="{{company.company_logo.url}}" alt="Pokestop logo">
  </div>

  <div class="flex flex-wrap mx-5">
    <div class="flex space-x-4">
      <a href="#" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">
        Bestil Pakker
      </a>

      <a href="#" class="text-gray-600 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">
        Søg Kort
      </a>
    </div>

    <div class="ml-auto">
      {% if userAuthenticated %}
      <div class="group relative ml-3" id="user-profile">
        <button type="button"
          class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
          id="user-menu-button" aria-expanded="false" aria-haspopup="true">
          <span class="sr-only">Open user menu</span>
          <img class="h-8 w-8 rounded-full"
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            alt="">
        </button>

        <div class="absolute top-10 right-0 bg-white w-48 py-2 rounded-md shadow-xl z-10 group-hover:block hidden"
          id="userMenu">
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Log out</a>
        </div>
      </div>
      {% else %}
      <div class="relative ml-3">
        <a href="#" class="bg-green-800 text-lime-100 px-3 py-2 rounded-md hover:text-gray-400 text-lg"
          aria-current="page">
          Log In
        </a>
      </div>
      {% endif %}
    </div>
  </div>
</nav>
b1payxdu

b1payxdu1#

当我用一个单独的div标签将组悬停更改为上一级时,它现在可以按预期工作了。

<nav class="bg-sky-50">
  <div class="flex justify-center">
    <img class="block w-auto h-[13rem] lg:hidden" src="{{company.company_logo.url}}" alt="Pokestop logo">
    <img class="hidden w-auto h-[13rem] lg:block" src="{{company.company_logo.url}}" alt="Pokestop logo">
  </div>

  <div class="flex flex-wrap mx-5">
    <div class="flex space-x-4">
      <a href="#" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">
        Bestil Pakker
      </a>

      <a href="#" class="text-gray-600 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">
        Søg Kort
      </a>
    </div>

    <div class="ml-auto">
      {% if userAuthenticated %}
      <div class="group relative ml-3" id="user-profile">
        <button type="button"
          class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
          id="user-menu-button" aria-expanded="false" aria-haspopup="true">
          <span class="sr-only">Open user menu</span>
          <img class="h-8 w-8 rounded-full"
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            alt="">
        </button>
        <div class="group-hover:block dropdown-menu absolute hidden h-auto">
          <div class="absolute top-0 right-0 bg-white w-48 py-2 rounded-md shadow-xl z-10">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Log out</a>
          </div>
        </div>
      </div>
      {% else %}
      <div class="relative ml-3">
        <a href="#" class="bg-green-800 text-lime-100 px-3 py-2 rounded-md hover:text-gray-400 text-lg"
          aria-current="page">
          Log In
        </a>
      </div>
      {% endif %}
    </div>
  </div>
</nav>

相关问题