title: How to trigger OnMouseOver AND onClick triggered from the same button?
body: <p>I am trying to implement a navigation feature, where the Navigation options have two features of functionality using React.js</p>
  <p>The first will be a hover event, that reveals a list of menu items using { Menu, Button, MenuItem } from '@mui/material' the second will be an onClick event that will eventually scroll a portion of the webpage into view.</p>
  <p>At the moment, I am struggling to resolve a conflict between these two mouse events. It appears I cannot have both, and one consistently overrides the capacity to trigger the other. here is simplified script based on my code:</p>
  <pre><code>function Navbar = () {
  
    const handleClickNav = () =&gt; {
      console.log('hello');
    };
  
    const [anchorEl, setAnchorEl] = useState(null);
  
    return (
             &lt;Button
                style={{ textTransform: 'none' }}
                name=&quot;el1&quot;
                aria-controls=&quot;simple-menu&quot;
                aria-haspopup=&quot;true&quot;
                onMouseOver={(e) =&gt; setAnchorEl(e.currentTarget)}
                onClick={handleClickNav}
              &gt;
                &lt;p
                  className=&quot;text-slate-200 text-md&quot;
                &gt;
                  About Us
                &lt;/p&gt;
              &lt;/Button&gt;
  
          &lt;Menu
            id=&quot;simple-menu&quot;
            name=&quot;el1&quot;
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={() =&gt; setAnchorEl(null)}
          &gt;
            &lt;MenuItem onClick={handleClose}&gt;
              &lt;p className=&quot;text-sm&quot;&gt;Menu Item 1&lt;/p&gt;
            &lt;/MenuItem&gt;
            &lt;MenuItem onClick={handleClose}&gt;
              &lt;p className=&quot;text-sm&quot;&gt;Menu Item 2&lt;/p&gt;
            &lt;/MenuItem&gt;
            &lt;MenuItem onClick={handleClose}&gt;
              &lt;p className=&quot;text-sm&quot;&gt;Menu Item 3&lt;/p&gt;
            &lt;/MenuItem&gt;
          &lt;/Menu&gt;
       );
  </code></pre>
  <p>How should I juggle both of these features?</p>