React+Tailwind下拉菜单后两项hover无高亮及指针切换问题求助

你的下拉菜单中CSV和Option3项hover异常的核心原因，是Link组件的to=""（空字符串）属性触发了React Router的默认行为：当to为空时，React Router会将该Link标记为当前活跃路由，自动添加活跃状态样式，直接覆盖了你设置的hover:bg-gray-100等交互样式，同时空地址还会干扰浏览器的hover事件响应。

两种可行修复方案 #

方案1：修正Link的跳转地址 #

如果暂时不需要实际跳转，将to=""改为to="#"或to="javascript:void(0)"，避免React Router误判为活跃路由：

const ButtonDropDown = () => {
  const [isDropdown, setIsDropdown] = useState(false);

  const toggleDropdown = () => {
    setIsDropdown(!isDropdown);
  }

  return (
    <div className="relative">
      <button 
      onClick={toggleDropdown}
      className="rounded-[5px] px-[1.4rem] py-[.5rem] bg-buttonColor text-buttonFont font-inter text-sm font-semibold leading-5 tracking-[0.28px]">
        Export <ArrowDown className="inline-flex" />
      </button>
      {isDropdown && (
        <div className="absolute right-0 mt-2 py-2 w-40 bg-white border rounded-lg shadow-lg">
          <Link to="#" className="block px-4 py-2 font-inter text-gray-800 hover:bg-gray-100 text-center">PDF</Link>
          <Link to="#" className="block px-4 py-2 font-inter text-gray-800 hover:bg-gray-100 text-center">CSV</Link>
          <Link to="#" className="block px-4 py-2 font-inter text-gray-800 hover:bg-gray-100 text-center">Option 3</Link>
        </div>
      )}
    </div>
  );
};

方案2：替换为非跳转元素 #

如果这些下拉选项不需要跳转功能，直接用div代替Link，彻底规避路由相关的样式干扰：

const ButtonDropDown = () => {
  const [isDropdown, setIsDropdown] = useState(false);

  const toggleDropdown = () => {
    setIsDropdown(!isDropdown);
  }

  return (
    <div className="relative">
      <button 
      onClick={toggleDropdown}
      className="rounded-[5px] px-[1.4rem] py-[.5rem] bg-buttonColor text-buttonFont font-inter text-sm font-semibold leading-5 tracking-[0.28px]">
        Export <ArrowDown className="inline-flex" />
      </button>
      {isDropdown && (
        <div className="absolute right-0 mt-2 py-2 w-40 bg-white border rounded-lg shadow-lg">
          <div className="block px-4 py-2 font-inter text-gray-800 hover:bg-gray-100 text-center cursor-pointer">PDF</div>
          <div className="block px-4 py-2 font-inter text-gray-800 hover:bg-gray-100 text-center cursor-pointer">CSV</div>
          <div className="block px-4 py-2 font-inter text-gray-800 hover:bg-gray-100 text-center cursor-pointer">Option 3</div>
        </div>
      )}
    </div>
  );
};

补充说明 #

• 你添加的hover:cursor-pointer属于冗余设置，Link和带cursor-pointer的元素默认就会显示指针样式，问题根源是空to导致的活跃样式覆盖。
• 可以通过浏览器开发者工具的元素面板，查看CSV/Option3对应的Link元素是否被添加了active类，直观确认样式冲突的来源。

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