Changement de curseur JavaScript (et retour en arrière)

J'ai cette page qui fait un peu funky de la base de données des trucs qui ne prend que quelques secondes, et en attendant, je voudrais définir un "wait" curseur de sorte que l'utilisateur n'a pas flip out et de garder en cliquant sur le bouton. J'ai regardé le

document.body.style.cursor = "wait"

chose, le problème c'est qu'il fonctionne uniquement lorsque la souris est sur le corps de la page (c'est à dire montre encore une forme normale si elle est sur un bouton). Comment puis-je le configurer de sorte que peu importe où la souris est sur la page, il affiche une icône d'attente?

Une deuxième partie à cette question est, une fois que c'est fait c'est chose, comment puis-je le régler? Si je l'ai mis dos à "default"ce qui semble ignorer tout "hover" curseur changements que j'avais mis dans mon CSS (donc il ne devient plus un coup de main lorsque plus d'un objet, etc.).

EDIT: la première réponse fonctionne très bien, sauf dans IE il n'a pas d'actualiser le curseur (de sorte que vous remarquez le changement de type de curseur) jusqu'à ce que vous en fait de déplacer le curseur. Toutes les corrections?

source d'informationauteur Jordan

  1. 4

    Pour votre premier problème, essayez d'utiliser cursor: wait !important;.

    Pour ton deuxième problème, le curseur par défaut pour les éléments est cursor: auto;pas cursor: default; ou cursor: inherit;.

  2. 10

    Ce que je suggère, c'est deux choses:
    a) Mieux d'écrire un CSS comme

    body.waiting * { cursor: wait; }

    b) Utiliser du JS pour gérer le corps de la classe

    /* when you need to wait */
document.body.className = 'waiting';
/* to remove the wait state */
document.body.className = ''; //could be empty or whatever you want

    Vous pouvez ajouter la classe au lieu de remplacer l'ensemble de l'attribut de classe, ce que je suggère, c'est d'utiliser quelque chose comme jQuery.

  3. 4

    Pas une réponse à la question, mais un moyen de parvenir à ce qui est voulu.

    Faire un div (voir la catégorie ci-dessous) qui est visible lorsque vous chargez.

    • assure qu'aucun élément est accessible en grisé affichage indique ce.

    • vous pouvez ajouter un gif animé pour indiquer que quelque chose se passe à la place du curseur.

      .loading{
      position:fixed;
      height:100%;
      width:100%;
      left:0;
      top:0;
      cursor:wait;
      background:#000;
      opacity:.5;
      z-index:999}

  4. 3

    Tous les éléments qui n'héritent pas le curseur par défaut (tels que des boutons) auront besoin pour mettre le curseur à hériter:

    someButton.style.cursor = 'inherit';

    Pour revenir à la valeur par défaut d'un élément (et pas de casser des choses comme :hover à une contrainte de curseur), spécifiez une chaîne vide:

    document.body.style.cursor = '';
  5. 3

    Le style doivent être manipulés via CSS, comme l'a déclaré W3C.com:

    CSS est le langage pour décrire la présentation des pages Web, y compris les couleurs, la mise en page et les polices. ... La séparation de HTML, de CSS permet de gérer plus facilement les sites, de partager des feuilles de style à travers les pages, et d'adapter les pages de différents environnements. Ceci est connu comme la séparation de la structure (ou contenu) de la présentation.

    Comme suggéré par Tom Rogerro, ajouter une ligne à votre fichier CSS:

    body.waiting * { cursor: wait; }

    Cependant, votre script doit pas remplacer l'ensemble de la liste des noms de classe. Tom a suggéré d'établir les noms de classe via jQuery, mais jQuery est inutile dans ce cas. Simple Javascript peuvent le faire.

    Pour ajouter un nom de classe "d'attente" dans le corps du document:

    document.body.classList.add('waiting');

    Pour supprimer un nom de classe "d'attente" du corps du document:

    document.body.classList.remove('waiting');
  6. 2

    Si vous êtes heureux à l'aide de JQuery, puis un rapide façon de résoudre ce problème serait d'utiliser:

    $('*').css('cursor','wait')

    Je ne sais pas comment élégant c'est, mais il a travaillé pour moi,