CODEWITHSUNDEEP
jquerycsshovertailwind-csshidden
Aisha Rafique
Aisha Rafique

Reputation: 53

How to add/remove class on hover using tailwind?

Is there any way to remove class once the object is hovered using tailwind classes?

<span className='group inline-block relative'>
  Hello
  <span className='hidden absolute -top-16 left-16 group-hover:inline-block'>&#45;</span>
</span>

Here I want to remove the hidden class once the object is hovered which means it would be hidden at first(when the page is loaded) but once it is hovered the object stays put.

Before:

enter image description here

Result needed:

![enter image description here

Upvotes: 1

Views: 9636

Answers (2)

MagnusEffect
MagnusEffect

Reputation: 3925

You can do something like this.

Use group class to group the elements and then add group-hover:flex to display that subsequent child element. Else remain that child to be hidden

  <script src="https://cdn.tailwindcss.com"></script>
  <div class="container mx-auto p-10">
    <div class="flex-col space-y-5">
      <!-- without hover -->
      <div class="bg-black text-white uppercase text-xl p-2 mx-auto w-min">hello</div>
      
      <!-- with hover -->
      <div class="group bg-black text-white uppercase text-xl p-2 mx-auto w-min">hello
        <div class="bg-white w-16 h-2 group-hover:flex hidden"></div>
      </div>
    </div>
  </div>

Upvotes: 0

Ron Adin
Ron Adin

Reputation: 127

To add a class on hover using tailwind, you can use the :hover pseudo-class. For example, if you wanted to add the class "hover:bg-red" to an element when the user hovers over it, you would use the following CSS:

.selector:hover { class:bg-red; }

To remove a class on hover using tailwind, you can use the :not(:hover) pseudo-class. For example, if you wanted to remove the class "hover:bg-red" from an element when the user hovers over it, you would use the following CSS:

.selector:not(:hover) { class:bg-red; }

Upvotes: 1

Related Questions