CSS Grab hand cursor

I wanted a grabby hand cursor in html since we're building sites that have draggable interfaces for both desktop browsers and touchscreen devices. I found some CSS that takes care of most modern browsers, and came up with a little extra for Internet Explorer and Chrome.

Here's the CSS:

#trackbar {
  width:100%;
  height:50px;
  cursor:hand;
  cursor:grab;
  cursor:-moz-grab;
  cursor:-webkit-grab;
}

#trackbar.custom_cursor {
  cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}

#trackbar.grabbing {
  cursor:grabbing;
  cursor:-moz-grabbing;
  cursor:-webkit-grabbing;
}

#trackbar.custom_cursor.grabbing {
  cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

The 3 cursor attributes looked great in most modern browsers, but didn't work in IE (obviously) or Chrome. I looked at some code in Google Maps and gleaned the custom cursors, which you can pull down locally, but you have to reference the .cur files absolutely, or they won't work in IE. Awesome. So, because we'd rather use CSS, we only apply the custom cursor files if you're in IE or Chrome. Something like this:

if( navigator.userAgent.match(/MSIE/i) || navigator.userAgent.match(/Chrome/i) ) document.getElementById('trackbar').className = 'custom_cursor';

I'm not sure if there's any way around it, but it doesn't seem like IE will change cursors after you mouse down. So if you add the "grabbing" class on a mousedown event, IE will block your grabby hands :(