CODEWITHSUNDEEP
vue.jstailwind-css
penguin
penguin

Reputation: 846

Displaying button when hovering over div in TailwindCSS

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>

Upvotes: 46

Views: 85113

Answers (5)

revo
revo

Reputation: 538

Or you can combine the twice solutions :

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

Upvotes: 0

Julian
Julian

Reputation: 770

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>

Upvotes: 77

Mattia S.
Mattia S.

Reputation: 623

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".

More information here.

Upvotes: 48

penguin
penguin

Reputation: 846

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.

Upvotes: -8

Aaron Chen
Aaron Chen

Reputation: 319

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>

Upvotes: 27

Related Questions