Changing the cursor on a hold down?

Question

So i want to change the cursor from

#sideBar ul li .template{
 cursor:pointer;
}

to maybe cursor:move; when the user is dragging...is there something i can use in jQuery or html to make this happen you hold down the mouse button

Answer 1

Instead of changing the css in your javascript code, keep it to just changing one class, which will update your element with as many different things as you want. I added a :hover pseudo-class because I'm not sure if cursor works without it.

Also, live works for any element added in the future and bind does not.

Css:

#sideBar ul li .template{
 cursor:pointer;
}

#sideBar ul li .template.mouseDown:hover{
 cursor:auto; /* or whatever cursor */
}

Javascript:

$("#sideBar ul li .template").live("mousedown", function () {
    $(this).addClass("mouseDown");
}).live("mouseup", function () {
    $(this).removeClass("mouseDown");
});