Disable hover styles (on mobile)?

[pmlk]

Dealing with hover on mobile / touch devices seems to be a topic of discussion.

Problem

I'm using a button, variant "outline". After clicking the button on a mobile device, the button looks like a regular (non-outline) button. Mobile users need to tap outside the button for the button to go back to its "outline" style after clicking it.

Desired / expected behavior

After clicking an "outline" button, I'd like the button to go back to its original "outline" style.

Questions

1. Is there a way to disable the hover styles on a button completely (while keeping the button clickable).
2. Is there some kind of workaround to get an "outline" button to behave as desired.

I wouldn't mind if the style doesn't change on hover on desktop if it solves the problem on mobile.

Context

I tried some of the suggestions in this issue (tailwindlabs/tailwindcss#1739), but it seems that it would only work in places where I manually add classes via classNames. However, the tailwind classes for the button's default behavior are out of my control and reach as far as I can tell.

[benjitrosch]

Hi @pmlk,

Hover effects aren't really a thing on mobile. What you're seeing is called focus (look up the hover, active, and focus css pseudo-classes to learn more).

This styling when the button is focused is a part of the daisyui design system, not a bug, and you can see it here:
https://github.com/saadeghi/daisyui/blob/c173e759cbeed70408307e8077482e8a0d8a1576/src/components/styled/button.css#L140

To answer the second part of your question, you could do something like this:

className="focus:bg-transparent focus:text-base-content"

[pmlk]

Thank your for the quick response, @benjitrosch!

I went down a little bit of a rabbit hole. Your suggestion worked in the Chrome device emulator. Interestingly, on iPhone (Safari) focus: does NOT work while hover: does.

However, I found that neither work when making use of the color prop. I also added active:, just to be sure. Is this meant to behave this way? Is there a way around that? 😄

<div>

  <!-- WORKS ONLY in chrome device emulator NOT on iPhone (Safari) -->
  <Button
    className="focus:bg-transparent focus:text-base-content"
    variant="outline"
  >
    focus
  </Button>

  <!-- WORKS on BOTH chrome device emulator and iPhone (Safari) -->
  <Button
    className="hover:bg-transparent hover:text-base-content"
    variant="outline"
  >
    hover
  </Button>
    
  <!-- WORKS on BOTH chrome device emulator and iPhone (Safari) -->
  <Button
    className="hover:bg-transparent hover:text-base-content focus:bg-transparent focus:text-base-content"
    variant="outline"
  >
    hover and focus
  </Button>
  
  <!-- DOES NOT WORK on chrome device emulator and iPhone (Safari) -->
  <Button
    className="hover:bg-transparent hover:text-base-content focus:bg-transparent focus:text-base-content active:bg-transparent active:text-base-content"
    variant="outline"
    color="error"
  >
    hover, focus and active with color
  </Button>
</div>

[benjitrosch]

Hmm, that's interesting. Thanks for doing such a comprehensive look into this. I'll take a look and let you know what I find!