how to show a hidden element on hover on tailwind

user_16131535 0
Viewed 1562

how would it be possible to display a hidden menu through a hover. im getting confused as to how a hidden element can be connected to a visible element. this example is on the headlessui website. however instead of clicking on it, would it be possible to hover to show the popover?

return (
  <div className='fixed w-full max-w-sm px-4 top-16'>
    <Popover className='relative'>
      {({ open }) => (
        <>
          <Popover.Button></Popover.Button>
          <Transition>
            <Popover.Panel className='absolute z-10 w-screen max-w-sm px-4 mt-3 transform -translate-x-1/2 left-1/2 sm:px-0 lg:max-w-3xl'></Popover.Panel>
          </Transition>
        </>
      )}
    </Popover>
  </div>
);
tailwind-css reactjs
1 Answers

Try using the onMouse in Events

return (
  <div onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}

className='fixed w-full max-w-sm px-4 top-16'>
    <Popover className='relative'>
      {({ open }) => (
        <>
          <Popover.Button></Popover.Button>
          <Transition>
            <Popover.Panel className='absolute z-10 w-screen max-w-sm px-4 mt-3 transform -translate-x-1/2 left-1/2 sm:px-0 lg:max-w-3xl'></Popover.Panel>
          </Transition>
        </>
      )}
    </Popover>
  </div>
);
user_91858560
Related