Изменение курсора JavaScript (и изменение обратно)

У меня есть эта страница, в которой есть несколько фанковых файлов базы данных, которые занимают пару секунд для обработки, и тем временем я хотел бы установить курсор "wait", чтобы пользователь не откидывался и продолжал нажимать кнопку. Я посмотрел на

document.body.style.cursor = "wait"

проблема заключается в том, что она работает только тогда, когда мышь находится над телом страницы (т.е. показывается нормальный указатель, если она над кнопкой). Как я могу установить его так, чтобы независимо от того, где находится мышь на странице, отображается значок ожидания?

Вторая часть этого вопроса заключается в том, как только он сделал это, как мне установить его обратно? Если я верну его обратно к "default", это, похоже, отменяет любые изменения курсора "hover", которые я установил в моем CSS (так что он больше не становится рукой, когда над указанным объектом и т.д.).

РЕДАКТИРОВАТЬ: первый ответ работает хорошо, за исключением IE, он не обновляет курсор (так что вы замечаете изменение типа курсора), пока вы на самом деле не переместите курсор. Любые исправления?

Ответы

Ответ 1

Для первой проблемы попробуйте использовать cursor: wait !important;.

Для вашей второй проблемы курсором по умолчанию для элементов является cursor: auto;, а не cursor: default; или cursor: inherit;.

Ответ 2

Я предлагаю две вещи: a) Лучше писать CSS как

body.waiting * { cursor: wait; }

b) Используйте JS для обработки класса body

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

Возможно, вы захотите добавить класс вместо замены всего атрибута класса, и я предлагаю использовать для него что-то вроде jQuery.

Ответ 3

Не ответ на вопрос, а способ достижения желаемого.

Сделайте div (см. класс ниже), который отображается при загрузке.

  • гарантирует, что элемент не доступен, а затемненный дисплей показывает это.

  • вы можете добавить анимированный gif, чтобы указать, что что-то происходит вместо курсора.

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

Ответ 4

Любые элементы, которые не наследуют курсор по умолчанию (например, кнопки), должны установить курсор для наследования:

someButton.style.cursor = 'inherit';

Чтобы вернуться к заданному по умолчанию элементу (и не разбивать такие вещи, как :hover с принудительным курсором), установите его в пустую строку:

document.body.style.cursor = '';

Ответ 5

Если вы счастливы с помощью JQuery, то быстрый способ решить эту проблему:

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

Я не знаю, насколько это элегантно, но он работал у меня,