This was pretty simple in Vanilla JS but I'm struggling to implement this in React.

I have Navbar with some links. Upon hovering over each link, I'd like the background color of the entire Navbar (classname: nav-section) to change accordingly. And by default I want to have a black color for the page. Anytime the cursor is not on any of the links, the navbar should be back to black again.

Say, my simplified Navbar.js is like this:

const Navbar = () => {
 return (
    <nav className='nav-section'>
    <div className="nav-list">
            <a className="list-item one">
              <div className="navlink-text">Red</div>
            </a>
            <a className="list-item two">
              <div className="navlink-text">Blue</div>
            </a>
            <a className="list-item three">
              <div className="navlink-text">Aqua</div>
            </a>
            <a className="list-item four">
              <div className="navlink-text">Cyan</div>
            </a>
          </div>
    </nav>
 );
};

export default Navbar;

I have an external css file styling the navbar and other elements that I have in it. What is the most efficient way to achieve what I want, with React? I tried to use emotion/css but I couldn't make it work. Any guidance is well appreciated.

CodePudding user response：

If I understand it correctly there are 2 possible solutions I wrote;

1. with css =>

.nav-section {
  pointer-events: none;
  background-color: black;
}

.nav-section:hover {
  pointer-events: none;
    background-color: red;
}

.nav-section > .nav-list {
  display: inline-flex;
  flex-direction: column;
}

.nav-section > .nav-list > .list-item {
  display: inline-block;
  pointer-events: auto;
  background-color: aqua;
}

.nav-section > .nav-list > .list-item:hover {
  background-color: rgb(154, 225, 225);
}

2. with react =>

const Navbar = () => {
  const [isHover, setIsHover] = useState(false);

  const handleHover = (_isHover) => setIsHover(_isHover);

  return (
    <nav className={`nav-section ${isHover ? "nav-hover" : ""}`}>
      <div className="nav-list">
        <a
          className="list-item one"
          onm ouseOver={() => handleHover(true)}
          onm ouseLeave={() => handleHover(false)}
        >
          <div className="navlink-text">Red</div>
        </a>
        <a
          className="list-item two"
          onm ouseOver={() => handleHover(true)}
          onm ouseLeave={() => handleHover(false)}
        >
          <div className="navlink-text">Blue</div>
        </a>
        <a
          className="list-item three"
          onm ouseOver={() => handleHover(true)}
          onm ouseLeave={() => handleHover(false)}
        >
          <div className="navlink-text">Aqua</div>
        </a>
        <a
          className="list-item four"
          onm ouseOver={() => handleHover(true)}
          onm ouseLeave={() => handleHover(false)}
        >
          <div className="navlink-text">Cyan</div>
        </a>
      </div>
    </nav>
  );
};

export default Navbar;

and its style =>

.nav-section {
  background-color: black;
}

.nav-section.nav-hover {
   background-color: red;
}
 
.nav-section > .nav-list {
  display: inline-flex;
  flex-direction: column;
}

.nav-section > .nav-list > .list-item {
  display: inline-block;
  background-color: aqua;
}

.nav-section > .nav-list > .list-item:hover {
  background-color: rgb(154, 225, 225);
}

And also it can be done with useRef, but it seems a bit complicated to me

CodePudding user response：

Take a look at useRef() in react. It's a great way to access style properties of an element. Therefore you could change the background of the navbar.

Of course you could also use the native css property :hover to change the backgound on hover.