How to override css cursor property of a hovered button?


Tags: javascript,jquery,html,css,cursor

Problem :

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

When the user click on the <button>, the cursor of all the page should become 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.net/URuLa/

Tested with Chrome 36.0.1985.125 (last version)



Solution :

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


    CSS Howto..

    How can I select the item that doesn't have attribute [duplicate]

    How can i perform a smooth css transition to my sticky bar?

    How can I make this menu using only ul, li and css?

    CSS - How to make a div's padding not affect the positioning of the div below it

    HTML/CSS: How to get some text to align on right and other text on left on same line of table cell

    jQuery hide / show class not changing css for future added elements

    How to achieve MS word tab function in html/ css?

    How to make a picture responsive that is on wordpress custom post type through HTML/CSS

    StackLayoutPanel Shows white ends at the rounded corners

    How to use CSS Seletor to capture attribute

    How to change the background colour of a QWidget inside QStackedWidget using css?

    ¿How to create text slider animation?

    How to visually re-order elements in a scrolling dropdown input div?

    jQuery UI sortable: how to leave css values of changed items untouched?

    How to make this loading animation?

    How to use top middle and center inside a div

    How does one target IE7 and IE8 with valid CSS?

    Scroll Bar not Fully show the value In Div

    how to resolve border-radius property issue in all versions of browsers? [duplicate]

    How to make a pure css based dropdown menu?

    How can I integrate the code from this pen onto my site?

    How do you set the filepath for css in hiccup with Clojure using the html5 tag?

    How to deal with `rowspan` and background colors within a table?

    How to keep floated width of divs to stay exact instead of 100%?

    How to animate text with css font-weight property in jQuery ? normal to bold

    How can I change the color of my body when using Bootstrap?

    How to use CSS absolute position inside a scrollable div element

    How to use CSS transition for existing list items to make room for new ones?

    How to Vertical align text in div

    How to get @media to take precedence over normal styling