A: Toggle show/hide child element on mouse hover

[alexgorbatchev]

This pattern to show/hide a child element on mouse hover works pretty well. It's possible to reuse the same variable name too across multiple container/child pair too w/o inteferring.

const useStyles = makeStyles({
  container: {
    '--display': 'none',

    ':hover': {
      '--display': 'block',
    },
  },
  child: {
    display: 'var(--display)',
  },
});