[英]TailWind CSS Dropdown on hover
I have the following component:我有以下组件:
<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>
Which looks like: The Dropdown Component The effect I am looking for is that the dropdown menu firstly is hidden, and each time I hover on the cart logo the dropdown menu will be visible for 2 seconds after leaving the mouse (after the hover finished) from the cart logo.看起来像:下拉组件我正在寻找的效果是首先隐藏下拉菜单,每次我在购物车徽标上的 hover 离开鼠标后下拉菜单将可见 2 秒(hover 完成后)从购物车标志。
Added "group h-0" class to to parent将“组 h-0” class 添加到父级
<div class="relative group h-0 ">
So that with the help of it access child class, also make height of parent 0px because don't want parent to take full height when child is hidden,这样在它的帮助下访问子 class,也使父级的高度为 0px,因为不希望父级在隐藏子级时占据全高,
Then in child div First hide the child then add block on hover of parent " hidden group-hover:block" in div然后在子div中首先隐藏子元素,然后在div中父“隐藏组悬停:块”的hover上添加块
<div class="absolute w-full hidden group-hover:block rounded-b border-t-0 z-10">
Hope it helps.希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.