在 makeStyles Material UI 中将鼠标悬停在第一个 child div 上时选择第二个 child div

Selecting second child div while hovering on first child div in makeStyles Material UI

我有一个parentdiv和两个childdiv，我想把CSS应用到第二个childdiv 当我将鼠标悬停在第一个 child div 上时。这是渲染方法的结构。

<div className={classes.parent}>
    <div className={classes.child1}></div>
    <div className={classes.child2}></div>
</div>

悬停时选择 child 类的 material UI 的 makeStyles 语法是什么？

您可以使用element+element select或select当前元素之后的元素：

const useStyles = makeStyles({
  parent: {
    //
  },
  child1: {
    "&:hover + *": {
      // change the background color of child-2 when hovering on child-1
      backgroundColor: "red"
    }
  },
  child2: {
    //
  }
});

现场演示