我有一个个人资料图片导航栏。当鼠标悬停在个人资料图片,我希望出现一个下拉菜单,允许用户选择注销链接。现在的问题是,当鼠标悬停在个人资料图片弹出工程。一旦鼠标离开个人资料图片做选择,下拉菜单消失。
我已经遵循了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>
1条答案
按热度按时间b1payxdu1#
当我用一个单独的div标签将组悬停更改为上一级时,它现在可以按预期工作了。