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

【问题标题】：Displaying button when hovering over div in TailwindCSS将鼠标悬停在 TailwindCSS 中的 div 上时显示按钮
【发布时间】：2020-07-10 00:41:19
【问题描述】：

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

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

代码

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

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案2】：

这是我的解决方案：

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

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

所以，当我写 group-hover:block 时，我是在说：“如果在我的直系父级上使用 group 类调度了 :hover 事件，则将 block 类应用于此元素。”。 em>

【讨论】：

您是否需要对您的顺风文件做一些特别的事情来完成这个？我目前只使用顺风/顺风 ui cdn，这不能直接开箱即用。 group-hover 适用于某些类，例如文本颜色，但不适用于块类。希望我在测试东西时不必使用 npm 进行编译。谢谢。
tailwind 3默认添加group类，不需要修改tailwind.config.js文件

【解决方案3】：

根据我的研究和建议，有人告诉我使用 opacity，但 opacity 并不能真正给它带来良好的 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 结合使用来实现这样的事情。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：