I have a <button>, when the user hover it, the cursor bee pointer (via CSS).

When the user click on the <button>, the cursor of all the page should bee wait (via jQuery).

However, if the user keeps the cursor inside <button>, it will stay as pointer. How can I fix this ?

Live example : /

Tested with Chrome 36.0.1985.125 (last version)

I have a <button>, when the user hover it, the cursor bee pointer (via CSS).

When the user click on the <button>, the cursor of all the page should bee wait (via jQuery).

However, if the user keeps the cursor inside <button>, it will stay as pointer. How can I fix this ?

Live example : http://jsfiddle/URuLa/

Tested with Chrome 36.0.1985.125 (last version)

• javascript
• jquery
• html
• css
• cursor

Share Improve this question Follow asked Jul 24, 2014 at 3:29 lepixlepix 4,99066 gold badges4343 silver badges5353 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Add a class for html that sets the cursor and sets all elements to also have the wait cursor when html has that class

CSS

html.wait, html.wait * {
   cursor:wait;
}

then instead of doing

$('html').css("cursor","wait");

use addClass to add the wait class to html

$('html').addClass("wait");

JSFiddle Demo

Then when done just use removeClass to remove the class

You can change the cursor property for your button in the click callback.

$(document).ready(function(){
    $("button").click(function() {
        $('html').css('cursor','wait');
        $(this).css('cursor','wait');
    });
});