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 to add slide animation when showing elements

    CSS or Javascript href hover (or mouseover) showing additional clickable links

    How to style this button in CSS to appear pushed down?

    How can I change GWT's widget CSS values?

    Use anchors and :target for navigation. How to show first layer by default

    How to add a second border around a CSS circle

    How to automatically update relative CSS paths for minification?

    How to align a link icon after the text via CSS?

    How do you make a nav bar “sticky”?

    How to add padding to a ul/li menu with a background image?

    How to rotate text using CSS

    How to get a CSS animation to run through the correct steps

    How to make child div scrollable when it exceeds parent height?

    How to position text in a div?

    CSS HTML : stumped on how to center this piece of text

    CSS - How to set an elements height as a % of a container with auto height?

    How to traverse and click on Next & Cancel Button (On PopUp) using selenium webdriver

    How to make an element remain inline

    How to make space between menu items in CSS/HTML

    Div's don't show up

    How to display a full-width grid of images that resizes and flows with the browser window with pure CSS

    How to Display text in Middle of table cell Horizontally and vertically in html css?

    How do you design your CSS?

    How to split an HTML paragraph up into its lines of text with JavaScript

    How can I make use of `::selection` for in chrome browsers?

    How do I make the dropdown menu width the same as the tab size?

    How to add external css into html

    Sublime - CSS - how to auto add .class for each section in the whole code?

    How to shift the alignment of text in a select dropdown toward the top and left with CSS?

    How to place elements on top of each other