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