css Question posted in
Some basic documentation can be found here.

Css – Tailwind set `group-hover` on button only when enabled

I have some buttons styled with TailwindCSS.

These buttons contains some icons / helper text (<span>) that should receive a color (different than the color used for button text) when the mouse is over the button.

I used the group class on button, and then in the inner element:

<script src="https://cdn.tailwindcss.com#.js"></script>

<button class="group bg-indigo-500 hover:enabled:bg-indigo-400 disabled:cursor-not-allowed">
  <span class="group-hover:text-pink-900">helper text</span>
</button>

<button disabled class="group bg-indigo-500 hover:enabled:bg-indigo-400 disabled:cursor-not-allowed">
  <span class="group-hover:text-pink-900">helper text</span>
</button>

Notifce that the hover effect is set only when the button is enabled (by using hover:enabled).

If the button is disabled, I want to disable this hover effect on the helper text well.

I’ve tried group-hover:enabled:text-pink-900, but it does not work.

disabled:pointer-events-none is not an option for me, because it will break disabled:cursor-not-allowed.

Example:
https://play.tailwindcss.com/US7h6jStv9

Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    I've managed to get the desired behaviour by combining group-* modifiers like this:

    group-hover:group-enabled:...

    <span class="group-hover:group-enabled:text-pink-900">★</span>


    <script src="https://cdn.tailwindcss.com#.js"></script>

<button class="group bg-indigo-500 hover:enabled:bg-indigo-400 disabled:cursor-not-allowed ...">
  Button text
  <span class="group-hover:group-enabled:text-pink-900">★</span>
</button>

<button disabled class="group bg-indigo-500 hover:enabled:bg-indigo-400 disabled:cursor-not-allowed ...">
  Button text
  <span class="group-hover:group-enabled:text-pink-900">★</span>
</button>

    Explanation:

    • group-hover:group-enabled:text-indigo-900 => produces the following css rule:
    .group:hover:enabled .(classname) {
  --tw-text-opacity: 1;
  color: rgb(131 24 67 / var(--tw-text-opacity));
}

    Example: https://play.tailwindcss.com/6BmIcNS610


  2. 0 
    <script src="https://cdn.tailwindcss.com#.js"></script>

<button class="group bg-indigo-500 hover:bg-indigo-400 disabled:pointer-events-none">
  <span class="group-hover:text-pink-900">helper text</span>
</button>

<button disabled class="group bg-indigo-500 hover:bg-indigo-400 disabled:pointer-events-none">
  <span class="group-hover:text-pink-900">helper text</span>
</button>

    You gotta check if it is disabled or not this should be fix ur issue

    Login or Signup to reply.
  3. 0

    you can do this, "disabled:pointer-events-none"

    Login or Signup to reply.
  4. 0

    Can you please check the below solution? Hope it will work for you.

    <script src="https://cdn.tailwindcss.com#.js"></script>

<button
  class="rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold uppercase tracking-wider text-white hover:bg-indigo-400 hover-[&>span]:text-red-700 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-offset-1 disabled:opacity-50">
  <span>Not Disabled</span>
</button>
<button
  class="rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold uppercase tracking-wider text-white hover:bg-indigo-400 hover-[&>span]:text-red-700 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-offset-1 disabled:opacity-50 disabled:hover-[&>span]:text-white"
  disabled>
  <span>Disabled</span>
</button>

    Example:
    https://play.tailwindcss.com/hXHNBTxnvz

    Login or Signup to reply.
  5. 0

    I had a similar issue recently, to solve it hide the helper text initially using invisible and pointer-events-none classes. Then make it visible and enable hover effects only when the button is hovered (group-hover:visible). This way, the hover effect is disabled when the button is disabled, this should achieve the desired behaviour:

    <script src="https://cdn.tailwindcss.com#.js"></script>

<div class="m-4 flex space-x-4">
  <button class="relative rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold uppercase tracking-wider text-white focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-offset-1 hover:bg-indigo-400 group">
    Not Disabled
    <span class="absolute top-full left-0 w-full bg-pink-500 opacity-0 transition-opacity duration-300 pointer-events-none invisible group-hover:visible group-hover:opacity-100">
      Helper Text
    </span>
  </button>
  <button class="rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold uppercase tracking-wider text-white focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
    Disabled
  </button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search