title: How to change mouse cursor on mousedown event
body: <p>I want to hold the mouse down and have its cursor change to an image. Then when I release the mouse I want it to rever back to its default. </p>
  
  <p>Here is the code I have thus far. It does not work unless you right click then left-mousedown. Weird.</p>
  
  <p><a href="http://jsfiddle.net/HLLNN/" rel="nofollow">http://jsfiddle.net/HLLNN/</a></p>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$("#background").on("mousedown", function () {
      $(this).addClass("mouseDown");
  }).on("mouseup", function () {
      $(this).removeClass("mouseDown");
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.mouseDown{
   cursor:progress  ; // I will eventually want an image file but I used this for brevity
  
  }
  
  
  #background{
      width:500px;
      height:500px;
      position:absolute;
      background-color:red;
  }
  </code></pre>