悬停时TailWind CSS下拉列表
悬停时TailWind CSS下拉列表
提问于 2021-12-02 18:14:26
我有以下内容：
<div class="p-5">
<div class="flex h-64 justify-center">
<div class="relative ">
<div class="flex flex-row cursor-pointer truncate p-2 px-4 rounded">
<div></div>
<div class="flex flex-row-reverse ml-2 w-full">
<div slot="icon" class="relative">
<div class="absolute text-xs rounded-full -mt-1 -mr-2 px-1 font-bold top-0 right-0 bg-red-700 text-white">3</div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart w-6 h-6 mt-2">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</div>
</div>
</div>
<div class="absolute w-full rounded-b border-t-0 z-10">
<div class="shadow-xl w-64">
<div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100" style="">
<div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50" alt="img product"></div>
<div class="flex-auto text-sm w-32">
<div class="font-bold">Product 1</div>
<div class="truncate">Product 1 description</div>
<div class="text-gray-400">Qt: 2</div>
</div>
<div class="flex flex-col w-18 font-medium items-end">
<div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 ">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</div>
$12.22</div>
</div>
<div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100" style="">
<div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50" alt="img product"></div>
<div class="flex-auto text-sm w-32">
<div class="font-bold">Product 2</div>
<div class="truncate">Product 2 long description</div>
<div class="text-gray-400">Qt: 2</div>
</div>
<div class="flex flex-col w-18 font-medium items-end">
<div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 ">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</div>
$12.22</div>
</div>
<div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100" style="">
<div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50" alt="img product"></div>
<div class="flex-auto text-sm w-32">
<div class="font-bold">Product 3</div>
<div class="truncate">Product 3 description</div>
<div class="text-gray-400">Qt: 2</div>
</div>
<div class="flex flex-col w-18 font-medium items-end">
<div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 ">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</div>
$12.22</div>
</div>
<div class="p-4 justify-center flex">
<button class="text-base undefined hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer
hover:bg-teal-700 hover:text-teal-100
bg-teal-100
text-teal-700
border duration-200 ease-in-out
border-teal-600 transition">Checkout $36.66</button>
</div>
</div>
</div>
</div>
</div>
<div class="h-32"></div>
</div>它看起来像：下拉组件我正在寻找的效果是，下拉菜单首先是隐藏的，每次我在手推车徽标上悬停时，下拉菜单将在离开鼠标后(在鼠标悬停完成后)从购物车徽标上显示2秒。
回答 1
Stack Overflow用户
发布于 2021-12-10 11:16:46
将"group h-0"类添加到父级
<div class="relative group h-0 ">所以在它的帮助下访问子类，也使得父级0px的高度不希望父级在隐藏时取满高度，
然后在子div中先隐藏子块，然后在父的悬停上添加块：隐藏组悬停:阻止div中的。
<div class="absolute w-full hidden group-hover:block rounded-b border-t-0 z-10">希望能帮上忙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
<body>
<div class="p-5">
<div class="flex h-64 justify-center">
<div class="relative group h-0 ">
<div class="flex flex-row cursor-pointer truncate p-2 px-4 rounded">
<div></div>
<div class="flex flex-row-reverse ml-2 w-full">
<div slot="icon" class="relative">
<div
class="absolute text-xs rounded-full -mt-1 -mr-2 px-1 font-bold top-0 right-0 bg-red-700 text-white">
3</div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-shopping-cart w-6 h-6 mt-2">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</div>
</div>
</div>
<div class="absolute w-full hidden group-hover:block rounded-b border-t-0 z-10">
<div class="shadow-xl w-64">
<div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100"
style="">
<div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50"
alt="img product"></div>
<div class="flex-auto text-sm w-32">
<div class="font-bold">Product 1</div>
<div class="truncate">Product 1 description</div>
<div class="text-gray-400">Qt: 2</div>
</div>
<div class="flex flex-col w-18 font-medium items-end">
<div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 ">
<polyline points="3 6 5 6 21 6"></polyline>
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
</path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</div>
$12.22
</div>
</div>
<div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100"
style="">
<div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50"
alt="img product"></div>
<div class="flex-auto text-sm w-32">
<div class="font-bold">Product 2</div>
<div class="truncate">Product 2 long description</div>
<div class="text-gray-400">Qt: 2</div>
</div>
<div class="flex flex-col w-18 font-medium items-end">
<div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 ">
<polyline points="3 6 5 6 21 6"></polyline>
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
</path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</div>
$12.22
</div>
</div>
<div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100"
style="">
<div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50"
alt="img product"></div>
<div class="flex-auto text-sm w-32">
<div class="font-bold">Product 3</div>
<div class="truncate">Product 3 description</div>
<div class="text-gray-400">Qt: 2</div>
</div>
<div class="flex flex-col w-18 font-medium items-end">
<div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 ">
<polyline points="3 6 5 6 21 6"></polyline>
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
</path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</div>
$12.22
</div>
</div>
<div class="p-4 justify-center flex">
<button class="text-base undefined hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer
hover:bg-teal-700 hover:text-teal-100
bg-teal-100
text-teal-700
border duration-200 ease-in-out
border-teal-600 transition">Checkout $36.66</button>
</div>
</div>
</div>
</div>
</div>
<div class="h-32"></div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70204520
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号