javascript - 将鼠标悬停在按钮上时如何打开 material-ui 菜单

Question

我试过如下所示，但无法实现。使用纯 CSS 并且它可以工作，但我需要使用 material-ui 提供的 makeStyles。

我想在用户将鼠标悬停在按钮上而无需单击按钮时显示项目的下拉列表。

const makeStyles= (theme) => ({
   button: {
    backgroundColor: "#4CAF50",
    color: "white",
    padding: "16px",
    fontSize: "16px",
    border: "none",
    "&:hover": {
      dropdown: {
        display: "block"
      }
    }
  },
  dropdown: {
    display: "none",
    position: "absolute",
    backgroundColor: "#f1f1f1",
    minWidth: "160px",
    boxShadow: `0px 8px 16px 0px rgba(0,0,0,0.2)`,
    zIndex: 1
  }
})

export default function DropDown() {
  const classes = useStyles();
  return (
<>
  <Button
   className={classes.button}
  >
    {title}
  </Button>
  <Menu className={classes.dropdown}>
    <Item/>
    <Item/>
    <Item/>
  </Menu>
</>
)}

Answer 1

为菜单按钮添加一个 onMouseOver 处理程序会起作用。

export default function DropDown() {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);
  const handleMouseOver= (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };
  return (
    <>
      <Button
        className={classes.button}
        onMouseOver={handleMouseOver}
      >
        {title}
      </Button>
      <Menu 
        className={classes.dropdown}
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </>
  );
}