vue.js - 在 TailwindCSS 中将鼠标悬停在 div 上时显示按钮

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

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

代码

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

最佳答案

您不能将鼠标悬停在隐藏元素上。

一种解决方案是使用不透明度

<div>
  <button class="text-white opacity-0 hover:opacity-100">Hello</button>
</div>

关于vue.js - 在 TailwindCSS 中将鼠标悬停在 div 上时显示按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60917112/