title: Override cursor with CSS
body: <p>I have an <code>overflow: hidden</code> div which I am scrolling by allowing the user to click and drag the background. There are also links and buttons in this space. </p>
  
  <p>This is what I do for the CSS:
      </p>
  
  <pre class="lang-css prettyprint-override"><code>#div-grabscroll {    
      cursor: url(../img/openhand.cur), move;
  }
  #div-grabscroll:active {
     cursor: url(../img/closedhand.cur), n-resize;
  }
  </code></pre>
  
  <p>This works great but what happens is that while dragging, if the mouse ends up moving (due to reaching scroll limits) over a button the <code>pointer</code> cursor overrides my <code>closedhand</code> cursor. </p>
  
  <p>The desired behavior is that for the entire duration that the div is being controlled by the mouse, I want the cursor to remain the <code>closedhand</code>. </p>
  
  <p>Is there a way to override the cursor without modifying CSS for <em>everything</em> that the mouse might move over? I tried <code>!important</code> on the <code>:active</code> style but that didn't do it. </p>