Question 37131 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to add/remove class on hover using tailwind? – Jquery

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'>-</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

Tags:

2

Answers


  1. 0

    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; }

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search