Search code examples
vue.jstailwind-css

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>
Solution

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