Изменить цвет выделения при прокрутке в React js ⇐ CSS

[Гость]

У меня возникла проблема с кодом компонента Navbar.jsx. Я реализовал функцию, при которой фон навигационной панели и текст меняют цвет при прокрутке, и она работает нормально, но я хочу, чтобы цвета :hover также вступали в силу, но вступал в силу только один цвет при наведении.
пока что действует только селектор 'nav-list' a:hover, но после прокрутки за пределы 650 пикселей он все еще использует 'nav-list' a:hover, когда я хочу, чтобы он использовал селектор 'nav-list-color' a:hover в этот момент.
Компонент Navbar.jsx

Код: Выделить всё

import React, { useState } from 'react'
import Logo from './Logo.jsx'
import '../App.css'

const Navbar = () => {
const state = useState()

const navigation = [
{_id:101, title: 'ABOUT US', href: '/'},
{_id:102, title: 'SHOP', href: '/Shop'},
{_id:103, title: 'MENU', href: '/Careers'},
{_id:104, title: 'CONTACT US', href: '/Contact-Us'},
];

const [colour, setColour] = useState(false)

const changeColour = () => {
if (window.scrollY >= 650) {
setColour(true)
} else {
setColour(false)
}
}

window.addEventListener('scroll', changeColour)

return (



[list]          className={colour ? 'nav-list nav-list-colour' : 'nav-list'}
>
{
navigation.map((item) => (
[url={item?.href} key={item._id}]
[*]
{item?.title}


[/url]
))
}
[/list]




)
}

export default Navbar

Это мой файл style.css

Код: Выделить всё

.nav-list {
font-weight: bold;
display: flex;
gap: 50px;
list-style-type: none;
justify-content: center;
font-size: larger;
position: relative; top: -30px; left: 300px;
}

.nav-list a {
/* color: hsl(96, 24%, 44%); */
color: hsl(48, 54%, 89%);
text-decoration: none;
text-underline-offset: 0.2em;
transition-duration: 500ms;
}

.nav-list-colour a {
color: hsl(96, 24%, 44%);
}

.nav-list-colour a:hover {
color: rgb(200, 181, 103);
}

.nav-list a:hover {
/* color: rgb(200, 181, 103); */
color: hsl(96, 24%, 44%);
text-underline-offset: 0.4em;
transition-duration: 300ms;
text-shadow: 0px 0px 3px;
}

Я попробовал настроить другую функцию с оператором if, влияющим ТОЛЬКО на цвет, но она перестала отображать изменения вообще. Любая помощь будет оценена по достоинству. Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/781 ... n-react-js