我试过如下所示,但无法实现。使用纯 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>
</>
)}
最佳答案
为菜单按钮添加一个 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>
</>
);
}
关于javascript - 将鼠标悬停在按钮上时如何打开 material-ui 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60912870/