[4.0.1]: `a` tags in menus have their hover styles take precedence over their active styles about react-daisyui HOT 9 CLOSED

@exoRift I'm not seeing this behavior, at the moment the active style takes precedence over hover. Can you post an example (as well as which browser you're using)?

from react-daisyui.

Set up the following (not sure if the classes are relevant, but I'm copying them from my impl):

return (
  <Navbar className='bg-base-200 sticky top-0 px-4 bg-opacity-80 backdrop-blur-sm z-40'>
    <Navbar.Start>
      <Menu horizontal>
        <Menu.Item>
          <a href='/'>some anchor</a>
        </Menu.Item>
      </Menu>
    </Navbar.Start>
  </Navbar>
)

You'll notice that upon clicking on the anchor, there is no change. However, if you use the inspector to force an active state (without hovering over), you'll see that the anchor bg transitions to neutral.

I'm using Chrome on Windows.

from react-daisyui.

@exoRift threw the code you provided into a quick code sandbox with react-daisyui 4.0.2 (in Chrome from my Windows 11 desktop) and everything looks good:

What theme are you using? It's possible the palette you've chosen/setup has low contrast between hover and active so it's not as noticeable? Or maybe the colors are reversed?

from react-daisyui.

These are the active styles

Overwritten by the hover's !importants

from react-daisyui.

@exoRift !important is neither added in daisyui nor in react-daisyui source code.

It's hard for me to say what's going wrong in your application without any context for the rest of your codebase. Maybe take a look in your globals.css file and see if some pre-existing CSS is overriding the daisyui styles.

from react-daisyui.

It certainly is odd. I don't have this issue with version 3.1.2 and this specific style seems to be the only one rendered with !importants.

    .dropdown.dropdown-hover:hover .dropdown-content {
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    :where(.menu li:not(.menu-title):not(.disabled)>:not(ul):not(details):not(.menu-title)):not(.active):hover,:where(.menu li:not(.menu-title):not(.disabled)>details>summary:not(.menu-title)):not(.active):hover {
        cursor: pointer;
        background-color: hsl(var(--bc)/.1);
        --tw-text-opacity: 1;
        color: hsl(var(--bc)/var(--tw-text-opacity));
        outline: 2px solid transparent;
        outline-offset: 2px
    }

    :where(.menu li:not(.menu-title):not(.\!disabled)>:not(ul):not(details):not(.menu-title)):not(.active):hover,:where(.menu li:not(.menu-title):not(.\!disabled)>details>summary:not(.menu-title)):not(.active):hover {
        cursor: pointer!important;
        background-color: hsl(var(--bc)/.1)!important;
        --tw-text-opacity: 1!important;
        color: hsl(var(--bc)/var(--tw-text-opacity))!important;
        outline: 2px solid transparent!important;
        outline-offset: 2px!important
    }

    .tab[disabled],.tab[disabled]:hover {
        cursor: not-allowed;
        color: hsl(var(--bc)/var(--tw-text-opacity));
        --tw-text-opacity: 0.2
    }
}

From the built CSS file

I don't have any !importants in my code even remotely related to this.

I have no way to trace it and the only indication I have is globals.css:5 which is just @tailwind components;

I will confirm that this doesn't seem to happen on the react-daisyui Storybook.

from react-daisyui.

Thanks, do let me know if you experience it on the Storybook because that's working as expected for me.

You wouldn't happen to have a browser extension that affects the styles on a page, e.g. recolors them or adds a fake dark mode? That's all I can think of assuming the rest of your project is totally boilerplate.

from react-daisyui.

No, I don't. Just gonna hope this bug manifests elsewhere in some easier-narrowed fashion and gets fixed in some patch.

from react-daisyui.

@benjitrosch I just wanted to let you know that a cause has been identified here and it's most likely a bug with Tailwind

tailwindlabs/tailwindcss#12099

from react-daisyui.