daisyui: change the color of navbar anchors when hover

Question

I am trying to change the default color of anchor elements in the navbar. It works well, but when I try to do the same for the hover state of the element, it does not work:

Here you can see the custom link:
And here the link when hover:

I want to keep the current background color when hover but change the text color to 'text-primary'.

My current situation is:

<div class="navbar-start hidden lg:flex">
        <ul class="menu menu-horizontal px-1">
            <li class="text-primary hover:text-primary"><a class="hover:text-primary">Home</a></li>
            <li class="text-primary"><a>Realisations</a></li>
            <li class="text-primary"><a>Contact</a></li>
        </ul>
    </div>

As you can see I only tried something on the home button. Thanks for help

Better make a working example in [Tailwind Play](https://play.tailwindcss.com/). — Kevin M. Mansour, Jun 10 '23 at 18:02
[It does actually work,](https://play.tailwindcss.com/tehyjY8wHd) beside I removed `hidden` on the container. — Kevin M. Mansour, Jun 10 '23 at 18:40
Version with Daisy added as a plugin: https://play.tailwindcss.com/h7rLjCzkSG?file=config — stickyuser, Jun 10 '23 at 18:49
Thanks for ur answers. With the example from stickyuser, we can see that the solution from Kevin does not work with daisy :/ — Auloma, Jun 10 '23 at 18:57

score 2 · Accepted Answer · answered Jun 11 '23 at 09:25

2

Consider using the !important modifier to ensure the Tailwind class applies:

<div class="navbar-start flex">
  <ul class="menu menu-horizontal px-1">
    <li class="text-primary"><a class="hover:!text-primary">Home</a></li>
    <li class="text-primary"><a>Realisations</a></li>
    <li class="text-primary"><a>Contact</a></li>
  </ul>
</div>

See this working in Tailwind Play.

answered Jun 11 '23 at 09:25

Wongjn

8,544
2
8
24

You save me ! thanks ! – Auloma Jun 11 '23 at 19:36

daisyui: change the color of navbar anchors when hover

1 Answers1