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

Question

I have a parent div and two child divs, I want to apply CSS to the second child div when I hover on the first child div. This is the structure of the render method.

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

What is the material UI's makeStyles syntax for selecting child classes on hover?

Answer 1

You can use element+element selector to select the element after the current element:

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

Live Demo