在 NextJs 中悬停时更改 link 颜色

Question

我是 NextJs 的新手，我正在尝试制作一个带有响应式导航栏的网站，当我将鼠标悬停在 link 上时，在该导航栏中它变成了蓝色，但我没有想要那个颜色我只想在悬停时更改它的颜色我该怎么做这是我到目前为止所做的：

import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import styles from '../../styles/Navbar.module.css';

export default function NavBar() {
    return (
        <>
            <nav className='navbar navbar-expand-lg navBg'>
                <div className='container flex-lg-row flex-nowrap align-items-center'>
                    <div className="navbar-brand" id="brand_img">
                        <a className='logo-dark' href="/">
                            <Image src="/logo.png" alt="Logo" layout='intrinsic' width={200} height={70} />
                        </a>
                    </div>
                    <ul className={styles.menuList}>
                        <li className={styles.menuItem}><Link className={styles.menuLink} href='/'>Home</Link></li>
                        <li className={styles.menuItem}><Link className={styles.menuLink} href='/About'>About Us</Link></li>
                        <li className={styles.menuItem}><Link className={styles.menuLink} href='/'>Plans</Link></li>
                        <li className={styles.menuItem}><Link className={styles.menuLink} href='/'>Blog</Link></li>
                        <li className={styles.menuItem}><Link className={styles.menuLink} href='/'>Features</Link></li>
                    </ul>

                    <div>
                        <button className="btn btn-light">Sign In</button>
                    </div>
                </div>
                <style jsx>
                    {`.navBg{
                        background-color: #2b2a28;
                        color: white;
                     }
`}
                </style>
            </nav>
        </>
    )
}

下面是我的 CSS 文件：

.menuList {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.menuItem {
    margin-right: 2rem;
    font-weight: 700;
}

.menuItem .menuLink:hover {
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid white;
}

Answer 1

你的代码是正确的我不明白为什么它不起作用也许试试

'refreshing the page or check the import path to make sure you imported correctly'.

Answer 2

您应该在 Link 元素中包含 <a> 元素，并在其中添加您的类名。所以你应该这样做：

<Link href='/'><a className={styles.menuLinkFeatures}>Features</a></Link>

在 NextJs 中悬停时更改 link 颜色

change link color on hover in NextJs

javascript

css

reactjs

next.js