How to open material-ui menu when hover on a button

user_10838000 0
Viewed 3619

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.

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>
</>
)}
material-ui reactjs javascript
1 Answers

Add an onMouseOver handler for the menu button would work.

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

enter image description here

user_118722460
Related