如何在Tailwind CSS中从隐藏悬停到阻止

fjaof16o 于 2023-10-21 发布在其他

关注(0)|答案(2)|浏览(191)

如何在顺风中将隐藏元素转换为块元素
我试过这个，但没有工作。

.bs .bsx .limit .ply {
        @apply hidden absolute w-full z-[1] h-full top-0 bg-black/[0.51] hover:block;
    }

我也试过这个，但它仍然不工作

.bs .bsx .limit .ply {
       @apply invisible absolute w-full z-[1] h-full top-0 bg-black/[0.51] hover:visible;
}

`
我已经尝试了其他除了隐藏阻止，但所有的工作，只有隐藏阻止不工作

2条答案

在Tailwind中可见不是一个选项。你必须使默认隐藏，然后使它块（或其他东西）悬停。Block是大多数元素的默认选项，我相信没有指定。所以当你调用hidden时，它会替换block属性。<div className="hidden hover:block">Hello World</div>

隐藏元素不会在DOM中呈现，因此无法通过鼠标悬停。相反，您可以根据父元素是否处于悬停状态来设置显示。我通过将group添加到父元素，然后将group-hover:block添加到隐藏元素来实现这一点。

<div className="group">
    <p>Always visible</p>
    <div className="hidden group-hover:block">Visible on hover</div>
</div>

在官方的顺风文档中找到。