目前,我在Vue中的div上悬停时,使用TailwindCSS显示一个按钮有点困难。通常,我会使用CSS来完成它,但是我想使用顺风来完成它。
我引用了使用可见性的文档,但它没有像预期的那样工作。屏幕相关元素的可见性是否正常?或者它也可以用于按钮和其他内容?
代码
<div>
<button class="text-white invisible hover:visible">Hello</button>
</div>
发布于 2020-03-30 17:17:43
根据我的研究和建议,我被告知要使用不透明,但是不透明度并没有给我很好的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与打字记录一起来实现这一目标。
发布于 2021-08-01 04:24:45
将此添加到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>
发布于 2021-05-05 12:45:27
这是我的解决方案:
<div class="group">
<button class="text-white hidden group-hover:block">Hello</button>
</div>
如您所见,我使用的是group
类,它将规则应用于子级,而不是其本身。
因此,当我编写group-hover:block
时,我说的是:“如果有一个带有类group
__的:hover
事件分派给我的直系亲属,那么将block
类应用于这个元素”。
https://stackoverflow.com/questions/60917112
复制相似问题