Next.js + Tailwind.css：Navbar浅色背景hover文字改紫色

问题根源 #

1. 混合模式干扰：Navbar容器使用了mix-blend-difference类，这个CSS混合模式会让文字颜色与背景色做差值计算。浅色背景（白色）下，紫色（#7E0ACB）的RGB值与白色（255,255,255）做差值后，会得到偏绿的颜色（255-126=129, 255-10=245, 255-203=52），这就是浅色背景hover变绿色的原因。
2. 自定义样式未生效：你在globals.css里定义了.hover-text-purple-600:hover类，但代码里实际用的是Tailwind自带的hover:text-purple-600，两者名称不匹配，自定义样式根本没起作用。

解决方法 #

方法一：移除混合模式（推荐，最直接）

直接去掉Navbar容器的mix-blend-difference类，文字颜色不再受背景干扰，hover的紫色能正常显示。如果需要在深色背景下保持文字白色，可以结合Tailwind深色模式或根据页面背景动态切换文字颜色：

修改后的Navbar.tsx：

import React from 'react';
import Link from 'next/link';

export default function Navbar() {
  return (
    <div className="fixed top-0 left-0 w-full flex justify-between p-12 bg-transparent z-10 text-white">
      <div className='text-3xl'>Long Tang</div>
      <ul className="flex text-xl">
        <li className="mx-4 hover:text-purple-600">
          <Link href="/">Home</Link>
        </li>
        <li className="mx-4 hover:text-purple-600">
          <Link href="/about">About</Link>
        </li>
        <li className="mx-4 hover:text-purple-600">
          <Link href="/projects">Projects</Link>
        </li>
        <li className="mx-4 hover:text-purple-600">
          <Link href="/research">Research</Link>
        </li>
        <li className="mx-4 hover:text-purple-600">
          <Link href="/contact">Contact</Link>
        </li>
      </ul>
    </div>
  );
}

若需适配深色/浅色背景，可给文字添加dark:text-white text-black类，同时确保项目配置了Tailwind深色模式。

方法二：保留混合模式，调整hover颜色

如果必须保留mix-blend-difference，可通过计算让差值后得到紫色：

• 浅色背景下，要让hover显示紫色，实际设置的颜色应为白色与紫色的差值：rgb(255-126, 255-10, 255-203) = rgb(129,245,52)
• 深色背景下，这个颜色与黑色差值会得到原本的紫色。

修改globals.css，定义适配混合模式的hover类：

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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-rgb: 255, 255, 255;
  --hover-purple-rgb: 126, 10, 203;
  --hover-inverse-rgb: 255 - 126, 255 - 10, 255 - 203;
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
}

/* 自定义hover类，适配混合模式 */
.hover-purple-blend:hover {
  color: rgb(var(--hover-inverse-rgb));
}

然后在Navbar.tsx里替换hover类：

<li className="mx-4 hover-purple-blend">
  <Link href="/">Home</Link>
</li>

方法三：使用Tailwind自定义颜色

在tailwind.config.js里添加自定义紫色，确保hover颜色规范可控：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        customPurple: '#7E0ACB',
      },
    },
  },
  plugins: [],
}

之后在Navbar里使用hover:text-customPurple，同时按需移除mix-blend-difference或按方法二调整。

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