如何在顺风悬停时显示隐藏元素答案

【问题标题】：how to show a hidden element on hover on tailwind如何在顺风悬停时显示隐藏元素
【发布时间】：2021-12-01 13:55:50
【问题描述】：

如何通过悬停显示隐藏菜单。我对如何将隐藏元素连接到可见元素感到困惑。这个例子在 headlessui 网站上。但是，不是单击它，而是可以悬停以显示弹出框吗？

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>
);

【问题讨论】：

您无法将鼠标悬停在 CSS 中的隐藏元素上。无论是顺风、引导、样式化的组件还是只是好的老式纯 CSS。该元素不存在让您的光标永远“结束”以启动悬停状态。
我认为他们要求隐藏元素在悬停可见元素时变得可见。
正确的 JHeth。刚发现popper.js，请忽略这篇文章。

标签： reactjs tailwind-css

【解决方案1】：

尝试在事件中使用 onMouse

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>
);

【讨论】：