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

Question

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

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

代码

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

Answer 1

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

Tailwind 3 添加了[基于带有 `group-{}` 修饰符的父状态的样式](https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state)默认。 (5认同)

Answer 2

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

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

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

Answer 3

这是我的解决方案：

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

如您所见，我正在使用group该类，该类将规则应用于子项而不是自身。

所以当我写的时候，我group-hover:block说：“block如果有一个:hover事件在我的直接父级和类上调度，则将类应用于这个元素group”。

您是否需要对顺风文件执行任何特殊操作才能实现此目的？我目前只使用 tailwind / tailwind ui cdn，这不能直接使用。组悬停适用于某些类，例如文本颜色，但不适用于块类。希望我在测试东西时不必使用 npm 进行编译。谢谢。 (3认同)
tailwind 3默认添加group类，无需修改tailwind.config.js文件 (2认同)

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 与 Typescript 结合使用来实现这样的事情。