JavaScript Cursor Ändern (und ändern und wieder zurück)

Habe ich diese Seite, hat einige funky Datenbank Sachen, die in ein paar Sekunden zu verarbeiten, und in der Zwischenzeit würde ich gerne eine "wait" cursor, so dass der Benutzer nicht ausflippen und halten Sie die-Taste. Ich habe die

document.body.style.cursor = "wait"

Sache, das problem dabei ist, dass es nur funktioniert, wenn die Maus über den Körper von der Seite (D. H. zeigt immer noch den normalen Mauszeiger, wenn er über eine Schaltfläche). Wie kann ich es so einstellen, dass, egal wo die Maus auf der Seite, es zeigt ein warten-icon?

Einem zweiten Teil dieser Frage ist, dass, sobald es fertig ist, es ist Sache, wie setze ich es zurück? Wenn ich Sie wieder auf "default" scheint dies zu überschreiben "hover" cursor ändert sich, ich hatte in meinem CSS (also es wird nicht mehr eine hand, wenn über einen bestimmten Gegenstand, etc.).

EDIT: die erste Antwort funktioniert Prima, ausser im IE ist es nicht, aktualisieren Sie den cursor (also Sie bemerken die Veränderung der cursor-Typ), bis Sie tatsächlich bewegen Sie den cursor. Alle fixes?

InformationsquelleAutor der Frage Jordan | 2011-03-03

  1. 4

    Für Ihre erste problem, versuchen Sie es mit cursor: wait !important;.

    Ihre zweite problem, die Standard-cursor für Elemente cursor: auto;nicht cursor: default; oder cursor: inherit;.

    InformationsquelleAutor der Antwort Hello71

  2. 10

    Was ich vorschlagen, zwei Dinge:
    a) Besser du schreibst eine CSS wie

    body.waiting * { cursor: wait; }

    b) Verwenden Sie die JS zu behandeln den Körper Klasse

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

    Möchten Sie vielleicht die Klasse statt ersetzen die gesamte Klasse, Attribut, was ich vorschlagen, ist die Verwendung von so etwas wie jQuery.

    InformationsquelleAutor der Antwort Tom Roggero

  3. 4

    Nicht eine Antwort auf die Frage, aber ein Weg, das zu erreichen, was gewünscht wird.

    Machen ein div-Element (siehe Klasse unten) sichtbar, wenn Sie geladen werden.

    • ist sichergestellt, dass kein element zugänglich ist, und abgeblendet, die Anzeige zeigt dies an.

    • können Sie eine animierte gif zu bezeichnen, dass etwas Los ist, anstatt den cursor.

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

    InformationsquelleAutor der Antwort Mahks

  4. 4

    Styling umgegangen werden soll, die über CSS, wie bereits von W3C.com:

    CSS ist die Sprache für die Beschreibung der Präsentation von Web-Seiten, einschließlich der Farben, layout und Schriftarten. ... Die Trennung von HTML von CSS macht es leichter zu pflegen Websites, share-Stylesheets auf allen Seiten, und passen die Seiten an unterschiedliche Umgebungen. Dies wird bezeichnet als die Trennung von Struktur (oder: content) von der Darstellung.

    Vorgeschlagen von Tom Rogerro, fügen Sie eine Zeile in der CSS-Datei:

    body.waiting * { cursor: wait; }

    Allerdings sollte das Skript nicht überschrieben wird die gesamte Liste der Klassennamen. Tom schlug vor, die Einstellung der Klassennamen per jQuery, aber jQuery ist in diesem Fall unnötig. Einfache Javascript tun können.

    Hinzufügen einer Klasse name 'warten', um den Dokument-Körper:

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

    Entfernen Sie eine Klasse name 'warten' aus der Dokument-Körper:

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

    InformationsquelleAutor der Antwort happyt

  5. 3

    Alle Elemente, die nicht Erben der cursor standardmäßig (wie buttons), müssen Sie den cursor zu Erben:

    someButton.style.cursor = 'inherit';

    Zurück zu gehen, um den Standardwert für ein element (und nicht zu brechen Dinge wie :hover mit einem Zwangs-cursor), legen Sie es auf eine leere Zeichenkette:

    document.body.style.cursor = '';

    InformationsquelleAutor der Antwort Delan Azabani

  6. 2

    Wenn Sie glücklich sind mit JQuery dann einen schnellen Weg, um dieses Problem zu lösen wäre:

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

    Ich weiß nicht, wie schön das ist, aber es wurde für mich zu arbeiten,

    InformationsquelleAutor der Antwort ShudderPig

  7. 0

    Ich habe alles versucht, aber letztendlich ist diese jquery gearbeitet, vor allem, wenn Sie wollen, warten Sie den cursor über alle Elemente, einschließlich Schaltflächen und links.

    definieren, an der Spitze eckig .ts-Datei

    declare var $: any;

    und dann wo immer Sie wollen warten cursor:

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

    entfernen und warten:

    $('*').css('cursor','auto');

    InformationsquelleAutor der Antwort Ashish Gupta

Schreibe einen Kommentar