0

I'm trying to build a navbar, using React and hooks, where each div will change to a specific color on an onMouseEnter and onMouseLeave. I can't figure out why they're all affected if i hover over one. I guess I'm asking how I could make them independent of one another.

365体育足球滚球比分Sorry if this is a really obvious mistake. Still really green. Thanks again!

365体育足球滚球比分Here is a link to the CodeSandbox:

  • Why do you want to do it in javascript? CSS can do that for you – Vaibhav May 28 at 3:15
0
0

365体育足球滚球比分I refactored your code. You can check it in

| improve this answer | |
0
0

You are using the function setBackground to set the background color in the hoverStyle CSS class which affects to all <div className="hoverStyle"> tags.

There are many options to do that. If you want to do it with React, one way of do it is creating a CSS class like this:

.active {
   background-color: #ffac4e;
}

then, create a functional component

const Activable = ({ className, children, bgColor}) => {
  const [active, setActive] = useState('#fff');

  return (
    <div className={`${ className } ${ active }`
      onMouseEnter = {() => setActive( bgColor )}
      onMouseLeave = {() => setActive('#fff')}
    >
      { children }
    </div>
  )
}

then replace your ` with this new component like this:

<Activable className="hoverStyle" bgColor="#ffac4e">
   <div style = {navChildLeft}>2020</div>
     <div style = {navChildTop}>
        Shy RL <br />
     Digital - Album art
   </div>
</Activable>

and repeat with the rest of <div>'s

| improve this answer | |
0
0

365体育足球滚球比分With react, it is important to think about reusable components. How can you create something that you can reuse over and over again in different parts of your project.

Take a look at this sample of your project broken into components.

365体育足球滚球比分I would recommend reading this to help out:

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy365体育足球滚球比分

Not the answer you're looking for? Browse other questions tagged or ask your own question.