[英]How to open material-ui menu when hover on a button
I tried doing as shown below but could not achieve it.我尝试如下所示但无法实现。 using plain CSS and it works but I need to use makeStyles
provide by material-ui.使用纯 CSS 并且它可以工作,但我需要使用 material-ui 提供的makeStyles
。
I want to show a drop-down list of items whenever a user hovers on the button without having to click on the button.我想在用户将鼠标悬停在按钮上而无需单击按钮时显示项目的下拉列表。
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>
</>
)}
Add an onMouseOver handler for the menu button would work.为菜单按钮添加一个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>
</>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.