光标：鼠标抓取javascript

Question

I have two images: one with an open hand, and one with a grabbing hand. I was hoping that a simple "onmousedown" and "onmouseup" functions help to make the famous grabbing hand you can see in something like google maps. BUT... Sorry, from the beginning: I have a simple DIV with nothing in, apart his background. when I hold down the mouse and start to "drag" the cursor a function is supposed to start and change the cursor form "hand open" to "hand grab". But the cursor become a selector for text istead of what I want. Any help? this is the example

<div onmousedown="function(){this.style.cursor='url(handgrab.png)'}"
onmouseup="function(){this.style.cursor='url(handopen.png)'}"
</div>

the only thing I want is change the cursor when dragging the mouse into the DIV. sorry for this inline choose, but I don't want write all the JS file...

Answer 1

You should access this through class name. It makes life easier.

Try this way:-

HTML:

<div onmouseup="this.className='openHand'" onmousedown="this.className='closeHand'">
    Mouse Down and Up Events
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

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

.closeHand {
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}​

Refer LIVE DEMO