0

I am having two hover classes as shown

.Link2:hover{
    color:black;
  }

.Li2:hover{
    background-color: white;
    border-color: white;

  }

Here is the JSX part:

 <ul>
    <li className={classes.Li1}>
        <Link onClick={this.menuDisappearHandler}
              to='/buyer'
              className={classes.Link1}>I want to Buy
        </Link>
    </li>
                
    <li className={classes.Li2}>
        <Link onClick={this.menuDisappearHandler}
              to='/seller'
              className={classes.Link2}>I want to Sell
        </Link>
    </li>
 </ul>

I want both hover classes to execute when I hover over Li2. How can I achieve it?

Pawan
  • 459
  • 5
  • 17
  • Does this answer your question? [How to affect other elements when one element is hovered](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered) – aerial Nov 09 '21 at 06:21
  • It depends on your HTML structure whether you can do this without Javascript. Please put enough HTML into your question so we can run a snippet. – A Haworth Nov 09 '21 at 06:46

1 Answers1

0

How to affect other elements when one element is hovered

You could do this for example if they are next to each other in HTML.

.Li2:hover {
     background-color: blue;
     border-color: white;
}
 .Li2:hover + .Link2 {
     color: red;
}
pso
  • 513
  • 1
  • 16
  • it is not working – Pawan Nov 09 '21 at 06:51
  • @Pawan It works for me. How does your HTML look like? – pso Nov 09 '21 at 06:54
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 09 '21 at 07:45