问在TailwindCSS中悬停在div上时显示按钮

EN

根据我的研究和建议，我被告知要使用不透明，但是不透明度并没有给我很好的UI/UX感觉，所以我选择了另一种在vue中创建私有布尔对象的方法，如

private hover: boolean = false;

注意:我发现@mouseover 和在Vue.仍然可行。

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

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

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

注:我正在使用Vue与打字记录一起来实现这一目标。

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

这是我的解决方案：

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

如您所见，我使用的是group类，它将规则应用于子级，而不是其本身。

因此，当我编写group-hover:block时，我说的是：“如果有一个带有类group__的:hover事件分派给我的直系亲属，那么将block类应用于这个元素”。

这里有更多的信息。