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

Question

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

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

代码

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

Answer 1

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

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

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

Answer 2

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

private hover: boolean = false;

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

然后在我的 .vue 文件中我会考虑使用布尔变量来触发我想隐藏的目标并且 display.That 是

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

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

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

Answer 3

这是我的解决方案：

<div class="group">
  <button class="text-white hidden group-hover:block">Hello</button>
</div>

如您所见，我正在使用 group class，它将规则应用于 children 而不是自身。

所以当我写 group-hover:block 时，我是说："如果调度了 :hover 事件，则将 block class 应用于此元素在我的直接 parent 和 class group".

Answer 4

将此添加到您的 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>

Displaying button when hovering over div in TailwindCSS