css - 如何一起执行两个悬停类？

Question

如图所示，我有两个悬停类

.Link2:hover{
    color:black;
  }

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

  }

这是 JSX 部分：

 <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> 

当我将鼠标悬停在Li2. 我怎样才能实现它？

标签： cssjsx

Answer 1

悬停一个元素时如何影响其他元素

例如，如果它们在 HTML 中彼此相邻，您可以这样做。

.Li2:hover {
     background-color: blue;
     border-color: white;
}
 .Li2:hover + .Link2 {
     color: red;
}