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?
Advertisement
Answer
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: { // } });