将鼠标悬停在嵌套链接上时，makeStyles 会显示一个 div

Question

所以我试图在用户将鼠标悬停在链接上时显示一个 div 框。

例如： 假设我在 a href 中有一张图片，我希望 div 漂浮在上面，然后说点击这里。

React 样式代码。

a: {

    '& :hover':{
        '& div#show':{
          display:'block'
        }
    }
  },

反应代码 悬停时显示的内容

完整代码

import React from 'react';
import clsx from 'clsx';
import { makeStyles,styled } from '@material-ui/core/styles';
//import Typography from '@material-ui/core/Typography';
import { Container, Button, Grid } from '@material-ui/core';
import comedynight from '../images/shows/PrideInjulyFridaynightcomedy2020.png';
import dragnight from '../images/shows/PrideInjulySaturdaynightDrag2020.png';


const drawerWidth = 240;
const DonateButton = styled(Button)({
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  border: 0,
  borderRadius: 3,
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  color: 'white',
  height: 48,
  width: '100%',
  fontWeight: 'Bold',
  padding: '0 30px',
});


const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
  },
  appBar: {
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    width: `calc(100% - ${drawerWidth}px)`,
    marginLeft: drawerWidth,
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  hide: {
    display: 'none',
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  drawerHeader: {
    display: 'flex',
    alignItems: 'center',
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
    justifyContent: 'flex-end',
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    marginLeft: 0,
  },
  contentShift: {
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
    marginLeft: 0,
  },
  a: {

    '& :hover':{
        '& div#show':{
          display:'block'
        }
    }
  },
}));


export default function Home() {

    const classes = useStyles();
    const [open] = React.useState(false);



    return(
        <Container>
        <main
        className={clsx(classes.content, {
          [classes.contentShift]: open,
        })}
      >
          <Grid container spacing={3}>
            <Grid item lg={12}>
              <DonateButton>Click here to donate now to support WAAids Council</DonateButton>
            </Grid>
            <Grid item md={6}>
              <a href="/shows/comedy" alt="Friday Comedy Night" className={classes.a}>
              <img src={comedynight} alt="Friday Night Comedy" style={{width:"100%"}}/>
              </a>
              <div id="show" style={{display:'none'}}>Stuff shown on hover</div>
            </Grid>
            <Grid item md={6}>
            <img src={dragnight} alt="Saturday Night Drag" style={{width:"100%"}}/>
            </Grid>
          </Grid>
      </main>
      </Container>
    )
}

Answer 1

你可以使用 state 来实现，但是如果你想用 css 来实现，那么你可以像这样使用它

a + #show: {
    display: 'none'
}
a:hover + #show: {
    display: 'block'
}

Answer 2

您问题中的代码 ('& div#show') 不起作用，因为您使用的是 descendant selector 而不是同级选择器，并且 div 不是链接的后代。此外，display: "none" 需要在JSS 中（在传递给makeStyles 的样式中）。如果您改为使用内联样式（就像您目前拥有的那样），则内联样式将胜过由 JSS 生成的 CSS 类，因为内联样式具有更高的 specificity。

以下是在 JSS 中使用 adjacent sibling selector 的示例。这是为切换元素使用另一个类而不是使用 id，如果您想继续使用 id，请参阅我的第二个示例。

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

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

const useStyles = makeStyles({
  triggerElement: {
    "&:hover + $toggledElement": {
      backgroundColor: "#ccc",
      display: "block"
    }
  },
  toggledElement: {
    display: "none"
  }
});
function App() {
  const classes = useStyles();
  return (
    <div>
      <div className={classes.triggerElement}>
        This is the trigger element. Hover over this to see the toggled element.
      </div>
      <div className={classes.toggledElement}>This is the toggled element</div>
    </div>
  );
}

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

这是另一个更接近于您现有代码的示例：

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

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

const useStyles = makeStyles({
  a: {
    "& + #show": {
      display: "none"
    },
    "&:hover + #show": {
      backgroundColor: "#ccc",
      display: "block"
    }
  }
});
function App() {
  const classes = useStyles();
  return (
    <div>
      <a href="/shows/comedy" className={classes.a}>
        Friday Night Comedy
      </a>
      <div id="show">Stuff shown on hover</div>
    </div>
  );
}

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