I have a div with overflow: hidden that I am making scrollable by allowing the user to click and drag the background. There are links and buttons within this space.
Here is the CSS I am using for this:
#div-grabscroll {
cursor: url(../img/openhand.cur), move;
}
#div-grabscroll:active {
cursor: url(../img/closedhand.cur), n-resize;
}
Although this solution is effective, I am encountering an issue where, while dragging, if the mouse moves over a button, the cursor changes to a pointer instead of remaining a closedhand as I want it to.
The behavior I desire is for the cursor to stay as a closedhand for the entire time the div is controlled by the mouse.
Is there a way to override the cursor without having to adjust the CSS for every element the mouse might interact with? I attempted using !important on the :active style, but this did not achieve the desired effect.