Prevent Cursor from changing on overlap
<p>I am writing the CSS and HTML for a site currently under construction, something I am not too familiar with having to code.</p>

<p>I have, per request, created a navigation menu that sits on the left side of the screen and expands to cover the page content partially when clicked, allowing the user to show and hide the nav when not needed.</p>

<p>The content that the nav overlaps when it is opened is a bunch of tables, with clickable cells and resizable columns (i.e. they change the cursor to a pointer to allow the user to know they can do something with the cells/table columns)</p>

<p>But when the nav expands over the page content, I am still picking up the cursor changes behind it, making it seem clickable in wrong locations.</p>

<p>Can anyone point me in the right direction on how to prevent elements on the page from picking up cursor changes on elements behind it?
I can probably dynamically change the CSS using javascript when the navBar is opened and closed (remove the cursor on open, add it back when closed) but I am searching for a simpler and more universal fix that can be utilized in the future as well.</p>