导航栏含搜索图标的a标签hover样式异常求助

问题分析 #

当前代码中，鼠标悬停在带搜索图标的<a>标签上时，仅SVG内的<rect>背景变色，但<a>标签本身的hover:text-white样式未生效。核心原因有两点：

1. <a>标签为绝对定位但未设置宽高，可交互区域仅由内部SVG决定，Hover触发范围受限；
2. Tailwind的hover:text-white类存在优先级冲突，未正确作用于SVG的currentColor属性。

解决方案 #

方案1：扩展可交互区域并统一Hover样式 #

修改自定义CSS，给.search类添加宽高、对齐样式，同时直接定义<a>标签的Hover颜色：

.search {
  left: 96%;
  /* 扩大可hover区域 */
  width: 28px;
  height: 28px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 同时控制a标签文字颜色和rect背景 */
.search:hover {
  color: white;
}
.search:hover rect {
  fill: #f44336;
  fill-opacity: 1;
}

方案2：用Tailwind Group Hover统一控制（推荐） #

利用Tailwind的group和group-hover特性，避免自定义CSS冲突：

<a href="#" class="absolute search group hover:text-white">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="w-5 h-5"
    >
      <!-- 用Tailwind类控制rect的hover样式 -->
      <rect class="w-full h-full fill-white fill-opacity-0 group-hover:fill-red-500 group-hover:fill-opacity-100" />
      <path
        fill-rule="evenodd"
        d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z"
        clip-rule="evenodd"
      />
    </svg>
  </a>

保留.search的定位样式即可：

.search {
  left: 96%;
  width: 28px;
  height: 28px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

效果验证 #

修改后，鼠标悬停在<a>标签的任意区域（包括扩展后的范围），会同时触发：

• SVG路径颜色变为白色（继承<a>的color:white）
• SVG矩形背景变为红色

内容的提问来源于stack exchange，提问作者Nguyễn Lân Dũng