How I can change the cursor CSS property of a link element, so when the user click on that link, the cursor switches from pointer to wait?

jQuery(document).ready(function(){
  jQuery('a.cursor_wait').click(function(){
    jQuery('body').css('cursor', 'wait');
  });
});

This works, but I must move with the mouse from the link to see the wait indicator, when I leave my cursor on the link, I still see the pointer.

How can I make this work without moving my cursor?

How I can change the cursor CSS property of a link element, so when the user click on that link, the cursor switches from pointer to wait?

jQuery(document).ready(function(){
  jQuery('a.cursor_wait').click(function(){
    jQuery('body').css('cursor', 'wait');
  });
});

This works, but I must move with the mouse from the link to see the wait indicator, when I leave my cursor on the link, I still see the pointer.

How can I make this work without moving my cursor?

• javascript
• jquery
• jquery-events

5 Answers 5

Example

http://jsfiddle/loktar/3WLGt/4/

JS

jQuery(document).ready(function(){
  jQuery('a.cursor_wait').click(function(){
    jQuery('body').css('cursor', 'wait');
      jQuery(this).css('cursor', 'wait');
  });
});

Changes the property of the current link to the wait cursor as well, because by default they are set to pointer.

you want only wait cursor on your link? so why select body and change cursor?!

$('a').css('cursor','wait');

Try this (not tested) :

jQuery('body').trigger('hover');

if I understand correctly , you want click on a link ( for example DELETE an item ) then change the courser to wait until your request will be done, turn it back to default...

var c= confirm("Are you sure?");
if(c)
{ 
    document.body.style.cursor="wait";
    $.post("delete.php?id=212",function(data){
        alert('I\'ve done it...');
        document.body.style.cursor="default";
    });
} 

I got it to work changing the class of the a, and changing the jquery to $ as below:

$(document).ready(function() {
    $('a').click(function() {
        $('body').css('cursor', 'wait');
        $(this).css('cursor', 'wait');
    });
});

However, this will work for all anchor tags a. You will need to specify the css class you want it to apply to.