Menu
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>
857
We can use Tailwind's hover modifier to create hover effects for elements. While we can target and style different properties of an element on hover, Tailwind does not allow us to chain multiple classes to a single hover instance. Even though we use multiple hover modifiers, they will all fire simultaneously.
Use invisible to hide an element, but still maintain its place in the DOM, affecting the layout of other elements (compare with .hidden from the display documentation).
Use overscroll-none to prevent scrolling in the target area from triggering scrolling in the parent element, and also prevent “bounce” effects when scrolling past the end of the container.
Tailwind CLIA simple yet awesome flutter package to generate and use TailwindCSS like styling in your flutter projects.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
