Ciniminis
Reputation: 41
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.
Upvotes: 1
Views: 3719
Answers (1)
Muhammad Sufyan
Reputation: 66
Added "group h-0" class to to parent
<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,
Then in child div First hide the child then add block on hover of parent " hidden group-hover:block" in div
<div class="absolute w-full hidden group-hover:block rounded-b border-t-0 z-10">
Hope it helps.
<!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>Upvotes: 3
Related Questions
- Tailwind css don't show hover state when input is in focus
- Hover not working in hyperlinks using tailwind css
- Tailwind change background color using :hover in style
- Dropdown menu react hover mouse
- Target child element with hover in Tailwind CSS
- Tailwind dropdown with react
- how to show a hidden element on hover on tailwind
- reactjs hover in style conmpnent: drop-down menu
- ReactJs - Link dropdown should open separately while hovering
- Animate toggle menu dropdown