javascript - 在makeStyles Material UI中悬停在第一个子div上时选择第二个子div

Question

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

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

在悬停时选择子类的材质 UI 的 makeStyles 语法是什么？

Answer 1

您可以使用element+element选择器选择当前元素之后的元素：

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

现场演示