How to hover over mouse capture?

Question

I made a demo on JSFIDDLE
UPDATE this version works in FF, but not chrome ..
UPDATE 2 This website has a working solution.

my javascript is as follows

$("#click").live({ mousedown: function() { this.addClass("closed"); }, mouseup: function() { this.removeClass("closed"); } }); 

and CSS is as follows

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

But why does the cursor not become a closed hand on the mouse with this jQuery code? Thanks a lot! Any help would be appreciated!

Answer 1

Update 2016:

I need to do this in the jQuery slider plugin I'm working on. What I did was define the cursors in CSS and then add / remove them on touch / mouse events using jQuery.

CSS

 .element:hover{ cursor: move; cursor: -webkit-grab; cursor: grab; } .element.grabbing { cursor: grabbing; cursor: -webkit-grabbing; } 

JS:

 $(".element").on("mousedown touchstart", function(e) { $(this).addClass('grabbing') }) $(".element").on("mouseup touchend", function(e) { $(this).removeClass('grabbing') }) 

Answer 2

You can only get the mouse cursor with CSS:

 /* Standard cursors */ .element { cursor: grab; } .element:active { cursor: grabbing; } /* Custom cursors */ .element { cursor: url('open-hand.png'), auto; } .element:active { cursor: url('closed-hand.png'), auto; } 

Answer 3

This works (at least in FF): http://jsfiddle.net/uZ377/21/

I replaced live with a binding, I don’t know why, but I couldn’t live. In addition, I wrapped this in a jQuery function.

Answer 4

I have separated these two events.

http://jsfiddle.net/genesis/uZ377/23/

However, it does not seem to work in Chrome, but works in Firefox.

Answer 5

 $(document).ready(function() { $(".surface").mouseup(function(){ $(".surface").css( "cursor","crosshair"); }).mousedown(function(){ $(".surface").css( "cursor","wait"); }); }); 

Make in css .surface{cursor:crosshair;} If you want the mouse down / up, just change the cursors to the up / down icon. Hope this helps.

Answer 6

Actually, there is a problem with the live method for binding the mousedown and mouseup events. Separating the two elements seems to work fine.

In any case, the cursor property URL is not supported in all browsers. For example, it works fine with Chrome and Firefox, but not in Opera, because, as far as I know, it does not support it.

Answer 7

the syntax you used was not introduced before 1.4.3 ( described here ), your jsFiddle uses 1.4.2. Your jsFiddle also adds the class to this , and not to $(this) .

But I'm also not sure how the CSS cursor responds to mousedown and mouseup - I have a sensation that may be limited in some browsers, it tinkers a bit that it works on mouseup, but not mousedown - which seems strange.

Answer 8

Work will begin in Safari after adding event.preventDefault () http://jsfiddle.net/uZ377/49/