DaisyUI：修改导航栏锚点Hover状态下的文字颜色

问题出在你使用的menu组件（大概率是DaisyUI的导航菜单组件）自带了hover状态的样式，优先级比你手动添加的hover:text-primary更高，导致自定义样式被覆盖。以下是几种可行的解决方法：

方法一：强制提升样式优先级（快速临时解决） #

直接给<a>标签的hover类加上!important，强制覆盖组件默认样式：

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

方法二：自定义CSS覆盖组件默认样式（推荐优雅方案） #

在你的Tailwind CSS入口文件（比如tailwind.css）中添加以下代码，通过@layer指令将自定义样式整合到Tailwind的层级中，确保优先级足够：

@layer components {
  /* 针对menu组件的hover状态，保留背景色并修改文字色为primary */
  .menu .menu-item:hover > a {
    color: theme('colors.primary');
    background-color: inherit; /* 继承父元素背景色，保留原有样式 */
  }
}

修改后HTML无需额外添加hover类，保持简洁即可：

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

方法三：利用Tailwind的group变体 #

给<li>标签添加group类，让<a>标签的hover样式依赖父元素的group状态，变相提升优先级：

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

内容的提问来源于stack exchange，提问作者Auloma