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.
Here is the code I have thus far. It does not work unless you right click then left-mousedown. Weird.
JQUERY
$("#background").on("mousedown", function () {
$(this).addClass("mouseDown");
}).on("mouseup", function () {
$(this).removeClass("mouseDown");
});
CSS
.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;
}
Well there is 2 things.
First, you have to prevent default. The default behavior is the drag (text selection) wich override your cursor.
$("#background").on("mousedown", function (e) {
e.preventDefault();
$(this).addClass("mouseDown");
}).on("mouseup", function () {
$(this).removeClass("mouseDown");
});
Second, while your mouse is down, you need to move the cursor else it doesnt work. I don't know why and didnt find a fix yet.
Anyway, check this fiddle : http://jsfiddle.net/HLLNN/3/
it seems that sometimes there are strange conditions, where Crome does not properly changes cursor after mousedown . I also have the situatin where cursor has changed shortly only in a moment after mouseup event :(
But the pure example in jsfiddle.net/romleon/429rf1tb/ works fine
Adding a return false;
to the end of mousedown
also helps.
$("#background").on({
"mousedown": function (e) {
$(this).addClass("mouseDown");
return false; //added this
},
"mouseup": function () {
$(this).removeClass("mouseDown");
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.