在 TailwindCSS 中将鼠标悬停在 div 上时显示按钮

Question

目前，我在将鼠标悬停在 Vue 中的 div 上时使用 TailwindCSS 显示按钮时遇到了一些麻烦。通常，我会使用 CSS 来完成，但我想使用 tailwind 来完成。

我使用 可见性 参考了文档，但它没有按预期工作。屏幕相关元素的可见性是否正常？或者它也可以用于按钮和其他内容？

代码

<div>
  <button class="text-white invisible hover:visible">Hello</button>
</div>

原文由 penguin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据我的研究和建议，有人告诉我使用不透明度，但不透明度并不能真正给它带来良好的 UI/UX 感觉，所以我采用了另一种在 vue 中创建私有布尔对象的方法，例如

private hover: boolean = false;

注意我发现 @mouseover 和 @mouseleave 在 Vue 中仍然可行。

然后在我的 .vue 文件中，我会考虑使用布尔变量来触发我想要隐藏和显示的目标。那就是

在您希望在悬停时隐藏和显示的目标按钮或元素上

<div class="mt-2 mb-2"
`@mouseover = "hover = true"`
`@mouseleave = "hover = false"`
>Hello World
</div>

注意：我将 Vue 与打字稿结合使用来实现这一目标。

原文由 penguin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

将此添加到您的 tailwind.config.js 文件

variants: {
    extend: {
        display: ["group-hover"],
    },
},

然后将 group 添加到您的父 div 并将 hidden 和 group-hover:block 添加到您希望在父元素悬停时显示的子元素。

 <div class="group">
  <button class="hidden group-hover:block">Child</button>
</div>

原文由 Julian 发布，翻译遵循 CC BY-SA 4.0 许可协议