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

Question

目前，将鼠标悬停在Vue中的div上时，使用TailwindCSS显示按钮有些麻烦。通常，我会使用CSS来实现，但是我想使用顺风来实现。

我使用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

这是我的解决方案：

status

如您所见，我正在使用 <div class="group"> <button class="text-white hidden group-hover:block">Hello</button> </div> 类，该类将规则应用于子项而不是自身。

所以，当我写 group 时，我是说：“如果有 group-hover:block 事件发送到我的直接父级，类 block {1}}”。

More information here.

Answer 3

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

Answer 4

根据我的研究和建议，我被告知要使用不透明性，但是不透明性并不能真正给人以良好的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和打字稿来实现这一目标。