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:

Result needed:

CodePudding user response：

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

CodePudding user response：

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 >
    <div >
      <!-- without hover -->
      <div >hello</div>
      
      <!-- with hover -->
      <div >hello
        <div ></div>
      </div>
    </div>
  </div>