如何在Tailwind CSS中为导航子元素设置独立hover事件？

原始导航栏代码（每个链接重复添加hover类）：

<nav class="space-x-4">
  <router-link to="/home" class="hover:text-gray-300 transition duration-300">Home</router-link>
  <router-link to="/form" class="hover:text-gray-300 transition duration-300">Form</router-link>
  <router-link to="/about" class="hover:text-gray-300 transition duration-300">About</router-link>
</nav>

为避免类重复，尝试的写法（出现hover任意链接时所有子元素都高亮的问题）：

<nav class="space-x-4 [&>router-link]:hover:text-gray-300 transition duration-300">
  <router-link to="/home">Home</router-link>
  <router-link to="/form">Form</router-link>
  <router-link to="/about">About</router-link>
</nav>

问题原因 #

你写的[&>router-link]:hover:text-gray-300实际生成的CSS规则是：

.nav:hover > router-link {
  color: rgb(209 213 219);
}

逻辑是当鼠标悬停在nav容器本身时，所有子router-link都会变灰，而非单个router-link自身被hover时才变色，因此会出现一hover就全链接高亮的情况。

解决方案 #

方案1：使用自定义组件类（推荐，更易维护） #

在你的CSS文件中定义可复用的组件类：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .nav-link {
    @apply hover:text-gray-300 transition duration-300;
  }
}

然后在HTML中给每个router-link应用这个类：

<nav class="space-x-4">
  <router-link to="/home" class="nav-link">Home</router-link>
  <router-link to="/form" class="nav-link">Form</router-link>
  <router-link to="/about" class="nav-link">About</router-link>
</nav>

方案2：修正自定义选择器写法 #

直接在nav上编写正确的选择器，让每个router-link自身hover时生效：

<nav class="space-x-4 [&>router-link:hover]:text-gray-300 [&>router-link]:transition [&>router-link]:duration-300">
  <router-link to="/home">Home</router-link>
  <router-link to="/form">Form</router-link>
  <router-link to="/about">About</router-link>
</nav>

这里的[&>router-link:hover]:text-gray-300会生成.nav > router-link:hover的CSS规则，实现单个链接hover时自身变色；同时把transition和duration属性通过选择器绑定到每个router-link上，保证过渡效果正常。

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