change link color on hover in NextJs-CodePudding

I am new to NextJs and I am trying to make a website with a responsive navbar, in that navbar when I hover over on the link it turns out to be blue in color but I don't want that color I just want to change its color on hover how can I do that this is what I have done so far:

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>
        </>
    )
}

Below is my CSS file:

.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;
}

CodePudding user response：

your code is correct i don't understand why its not working maybe try

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

CodePudding user response：

You're supposed to have <a> element inside the Link element and add your classname there. So you should do this:

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