1

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?

shishir
  • 41
  • 4

1 Answers1

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

Edit 67190862/selecting-second-child-div-while-hovering-on-first-child-div-in-makestyles-mater

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
  • Thanks a lot! This is what I was looking for. Can you direct me to some documentation of JSS selectors? I can't seem to find anything online. I have seen `$` also being used in certain places but I am not sure what it means. – shishir Apr 21 '21 at 07:31
  • 1
    @user8109438 About the dollar sign, you can read this [question](https://stackoverflow.com/q/59243783/9449426) here for more info. [JSS documentation](https://cssinjs.org/jss-plugin-nested?v=v10.6.0#use--to-reference-selector-of-the-parent-rule). You can also see all CSS selectors [here](https://www.w3schools.com/cssref/css_selectors.asp). – NearHuscarl Apr 21 '21 at 07:38