我做了一个导航栏组件，让用户在导航到主页、项目等时看到一个紫色的链接。当背景是暗的时，我可以看到悬停时的紫色，但当背景是亮的时，它是绿色。如果我想在背景是亮的时让文本悬停为紫色，我该怎么做呢？
Navbar.tsx
import React from 'react';
import Link from 'next/link';
export default function Navbar() {
const hoverStyle = { color: '#7E0ACB' };
return (
<div className="fixed top-0 left-0 w-full flex justify-between p-12 bg-transparent z-10 text-`your text`white mix-blend-difference">
<div className='text-3xl'>Long Tang</div>
<ul className="flex text-xl">
<li className="mx-4 hover:text-purple-600">
<Link href="/" passHref>
Home
</Link>
</li>
<li className="mx-4 hover:text-purple-600">
<Link href="/about" passHref>
About
</Link>
</li>
<li className="mx-4 hover:text-purple-600">
<Link href="/projects" passHref>
Projects
</Link>
</li>
<li className="mx-4 hover:text-purple-600">
<Link href="/research" passHref>
Research
</Link>
</li>
<li className="mx-4 hover:text-purple-600">
<Link href="/contact" passHref>
Contact
</Link>
</li>
</ul>
</div>
);
}字符串
globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--foreground-rgb: 0, 0, 0; /* black */
--background-rgb: 255, 255, 255; /* white */
--hover-color-rgb: 126, 10, 203; /* purple */
}
body {
color: rgb(var(--foreground-rgb));
background: rgb(var(--background-rgb));
}
.hover-text-purple-600:hover {
color: var(--hover-color);
}型
我去了顺风配置文件和修改的颜色和仍然什么都没有
2条答案
按热度按时间2mbi3lxu1#
为了达到预期的效果，需要更新global.css文件中的“--hover-color-rgb”变量，以在背景较亮时反映紫色。以下是如何做到这一点：
字符串
在更新后的代码中，我添加了一个名为“--hover-color-light-bg-rgb”的新变量，并将其设置为与“--hover-color-rgb”相同的紫色。然后，我将新颜色应用于“hover：text-purple-600”类，该类用于Navbar组件中的悬停效果。通过进行这些更改，当鼠标悬停在链接上时，文本将显示为紫色，无论背景颜色是亮还是暗。
2skhul332#
你应该使用react context或state或其他解决方案来实现dark/light模式，然后你可以使用tailwind的this link来为每个模式实现适当的类名。
字符串