score:13

Accepted answer

The correct syntax is "&:hover > div:hover": { ... }.

Here is a working example demonstrating the syntax:

import React from "react";
import ReactDOM from "react-dom";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  navlink: {
    border: "1px solid green",
    fontSize: "16pt",
    "&:hover": {
      backgroundColor: "lightgreen"
    },
    "&:hover > div:hover": {
      backgroundColor: "lightblue"
    }
  }
});
function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <div className={classes.navlink}>
        Hello <div>CodeSandbox</div>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit nested div hover

It also works to deeply nest with this syntax:

const useStyles = makeStyles({
  navlink: {
    border: "1px solid green",
    fontSize: "16pt",
    "&:hover": {
      backgroundColor: "lightgreen",
      "& > div:hover": {
        backgroundColor: "lightblue"
      }
    }
  }
});

Edit nested div hover

Here is the relevant JSS documentation: https://cssinjs.org/jss-plugin-nested/?v=v10.0.0-alpha.24

Related answer:


Related Query

More Query from same tag