Adjusting Cursor Behavior
In my quest to create a draggable scrollable image, I am attempting to change the cursor over an image when a certain variable is set to zoom mode to enhance usability. However, I have encountered an issue where the cursor only changes after clicking the ".page" and then moving the mouse, rather than immediately upon clicking as expected. Below is an example of the 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');
}
});
Alternative CSS-Based Approach
A similar issue arises when using classes for the same purpose. For instance, adding a class outside of the .page object in zoom mode and utilizing the following JavaScript:
$(".page").on("mousedown", function (evt) {
$('.page').addClass('mouseDown');
}).on("mouseup", function (evt) {
$('.page').removeClass('mouseDown');
});
The corresponding CSS looks like this:
.zoom .page:hover{
cursor:url(../img/hand_open.gif),auto;
}
.zoom .page.mouseDown:hover{
cursor:url(../img/hand_closed.gif),auto;
}
I am currently testing in Chrome 18. Does anyone have a solution to apply the CSS cursor change without requiring mouse movement?