Javascript 如何在鼠标悬停在按钮上时打开材质ui菜单

我试着做如下所示，但未能实现。使用简单的CSS，它可以工作，但我需要使用

makeStyles

providedbymaterialui

每当用户悬停在按钮上而不必单击按钮时，我想显示项目的下拉列表

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>
</>
)}

constmakestyles=（主题）=>({
按钮：{
背景颜色：“4CAF50”，
颜色：“白色”，
填充：“16px”，
字体大小：“16px”，
边界：“无”，
“&：悬停”：{
下拉列表：{
显示：“块”
}
}
},
下拉列表：{
显示：“无”，
位置：“绝对”，
背景颜色：“f1f1”，
最小宽度：“160px”，
框影：`0px 8px 16px 0px rgba（0,0,0,0.2）`，
zIndex:1
}
})
导出默认函数下拉列表（）{
const classes=useStyles（）；
返回(
{title}
)}

为菜单按钮添加一个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>
    </>
  );
}

导出默认函数下拉列表（）{
const classes=useStyles（）；
常量[anchorEl，setAnchorEl]=React.useState（null）；
const handleMouseOver=（事件）=>{
Setancorel（事件当前目标）；
};
常量handleClose=（）=>{
setAnchorEl（空）；
};
返回(
{title}
轮廓
我的帐户
注销
);
}

---

那篇文章解决了你的问题吗？请提供一些反馈，我们将不胜感激。