在React中滚动时，如何使导航栏突出显示？

Question

As I scroll to projects, about, contact etc.. i'd like my navbar element for that section to hightlight, lets just say a background of blue. How can I do this with React? i've never done anything like this before.

import React from 'react';


const Navbar =()=>
    <div className='navbar'>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#projects">Projects</a>
        <a href="#contact" >Contact</a>
    </div>

export default Navbar

this is my navbar I want to highlight

I looked up a ton of of stuff for on scroll with react, none of them where able to help me.

thanks for any help

Answer 1

You can do it using basic CSS

a:hover {
  background-color: "YourValue";
  color: "YourValue";
}