Custom CSS cursor using JQuery css method

Question

Is there a way I can use JQuery's .css() method to give the following cursor style?:

cursor: url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur), default !important;

score 6 · Accepted Answer · edited May 23 '17 at 12:04

6

jQuery doesn't understand the !important, so if you remove that it'll work:

$('selector').css({
    'cursor': 'url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur), default'});

There are ways to get around it, why not use a CSS class?

/* CSS */
.cursor {
    cursor: url('http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur'), default !important;
}

So you can just:

$('selector').addClass('cursor');

There are other alternatives too, see: How to apply !important using .css()?

edited May 23 '17 at 12:04

Community

answered Mar 18 '13 at 23:44

Amy

I'm using JQuery UI Sortable which takes a cursor option and sets the cursor style using .css(). I've tried handling cursor changing with mouse events but have ran into trouble of resetting the cursor. Using the library's cursor option give me the expected cursor resetting. – Thomas Mar 19 '13 at 00:00
If you use the `` element, then you can do this in CSS `a:hover{ cursor: .... }` and get around not using JavaScript at all. – Amy Mar 19 '13 at 00:19

score 1 · Answer 2 · answered Mar 18 '13 at 23:44

It seems to work fine for me in a fiddle using the below code, but yes as mentioned above I removed the !important which made it work.

$('#cursor').css(        
    'cursor','url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur),default'
);

2 Answers2