How to trigger custom cursor change on mousedown without mousemove event (jQuery)

Question

Trying to change the cursor

I am trying to make a draggable scrollable image and as such am trying to change the cursor over an image when a variable is set to zoom mode so I can have good usability. What I am finding is that the cursor only changes once I have clicked the ".page" and THEN moved the mouse not just as I click the page as it should. Here is some example code:

$(".page").on("mousedown", function (evt) {
    if(model.zoomMode){
        $('.page').css('cursor','url("img/hand_closed.gif"),auto');
    }       
}).on("mouseup", function (evt) {
    if(model.zoomMode){
        $('.page').css('cursor','url("img/hand_open.gif"),auto');
    }
});

Another approach relying more on CSS

This seems to happen when I use classes to achieve the same effect as well. ie. zoom mode adds a class outside of the .page object and then the javascript is:

$(".page").on("mousedown", function (evt) {
    $('.page').addClass('mouseDown');
}).on("mouseup", function (evt) {
    $('.page').removeClass('mouseDown');
});

Then in the CSS:

.zoom .page:hover{
    cursor:url(../img/hand_open.gif),auto;
}

.zoom .page.mouseDown:hover{
    cursor:url(../img/hand_closed.gif),auto;
}

I am using chrome 18 to test. Anyone know a way to trigger the CSS cursor being applied without moving the mouse?

Answer 1

Short answer: No.

Long answer: Nope, sorry.

(source)