At the moment I am having a bit of trouble using TailwindCSS to display a button when hovering over a div in Vue. Normally, I'd use CSS to do it but I want to do it using tailwind.
I referred to the documentation using visibility but it didn't work as expected. Is visibility normally for screen related elements? or it can be used for buttons and other content as well?
Code
<div>
<button class="text-white invisible hover:visible">Hello</button>
</div>
Add this to your tailwind.config.js file
variants: {
extend: {
display: ["group-hover"],
},
},
And then add group to your parent div and hidden and group-hover:block to your child element that you want to appear on hover of the parent.
<div class="group">
<button class="hidden group-hover:block">Child</button>
</div>
Here's my solution:
<div class="group">
<button class="text-white hidden group-hover:block">Hello</button>
</div>
As you can see I'm using the group class, which applies a rule to the children instead of itself.
So when I write group-hover:block I'm saying: "Apply the block class to this element if there's an :hover event dispatched on my immediate parent with the class group".
You cannot hover over a hidden element.
One solution is using opacity
<div>
<button class="text-white opacity-0 hover:opacity-100">Hello</button>
</div>
Based on my research and recommendations I have been told to use opacity, but opacity does not really give a good UI/UX feel to it so I went with another route of creating a private boolean object in vue such as
private hover: boolean = false;
Note I found @mouseover and @mouseleave are still viable in Vue.
then in my .vue file I would consider using boolean variables to trigger the target I would want to hide and display.That is
On the target button or element you'd like to hide and display when hovering
<div class="mt-2 mb-2"
`@mouseover = "hover = true"`
`@mouseleave = "hover = false"`
>Hello World
</div>
Note: I am using Vue in tandem with typescript to achieve such a thing.