如何在 MUI 按钮上同时使用 OnMouseEnter 和 onClick 或者我们可以做到吗？

Question

我正在处理标题处的登录按钮，它不仅在单击时显示登录对话框，而且在 onMouseEnter 上显示下拉菜单。 使用的 Button 是一个 MUI 组件。 这是按钮的代码：-

                   <Button
                    onMouseEnter={handleClick}
                    onClick={() => { console.log("hi") }}
                    endIcon={ !Open ? <ArrowDownwardIcon/> : <ArrowUpwardIcon/>}
                    style={{ color: "#047BD5", background: "white" }} variant="contained">Login
                </Button>
                <Menu
                    id="basic-menu"
                    open={Open}
                    anchorEl={anchorEl}
                    onClose={handleClose}
                    onBlur={handleClose}
                    style={{width:"100%"}}
                    MenuListProps={{
                        'aria-labelledby': 'basic-button',
                    }}
                >
                    {Auth && <MenuItem style={{ color: "#047BD5" }} onClick={() => { setOpen(true)  }}>Login</MenuItem>}
                    <MenuItem style={{ color: "#047BD5" }}  onClick={() => { setSignOpen(true) }}>SignUp</MenuItem>
                    <MenuItem style={{ color: "#047BD5" }} onClick={handleClose}>Orders</MenuItem>
                    <MenuItem style={{ color: "#047BD5" }} onClick={handleClose}>Whislist</MenuItem>
                    <MenuItem style={{ color: "#047BD5" }} onClick={handleClose}>Logout</MenuItem>
                </Menu>

下面的菜单部分只是下拉菜单。

问题 当我将 mousePointer 移动到要单击的按钮时，它不接受单击事件。甚至 Hand pointer 也不会出现在 Button 上。我有点理解这个问题，但没有那么多地去解决它。 简而言之：- 只有悬停事件被触发，而不是单击按钮时的 onClick 。 期待 我希望当我将指针移动到 Button 时触发 Hover 事件，当单击 Button 时 onClick 事件也应该被触发。我会对 js 解决方案感到满意，而不是反应或使用简单的 Button 而不是 MUI Button 。

如果你能帮助我，那一定会让我开心。如果需要任何其他详细信息，请随时询问。 谢谢！ 有一个没有错误的一天。