Самый простой способ установить курсор для ожидания, а затем вернуть все элементы назад

На моем веб-сайте у меня есть несколько классов CSS, которые устанавливают фиксированный тип курсора, когда вы наводите на них курсор. Я хочу установить курсор на изображение ожидания, когда я делаю вызов AJAX в любом месте страницы, а затем вернусь обратно к любому курсору, который должен быть после завершения вызова AJAX.

Я пробовал:

$(document).ajaxStart(function () {
    document.body.style.cursor = 'wait';
});

$(document).ajaxStop(function () {
    document.body.style.cursor = 'auto';
});

Это не работает, когда моя мышь находится над объектом DOM с классом CSS, который меняет курсор, и я не понимаю, как это сделать.

В настоящее время у меня есть класс:

.pills a:hover
{
    background-color: #0069D6;
    color: #FFFFFF;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    text-decoration:none;
    cursor:pointer;
}

Если вы наведите указатель мыши на объект в этом классе и начнется вызов Ajax, курсор останется в виде указателя.

Ответ 1

Вы можете использовать комбинацию переключения класса на body и !important.

http://jsfiddle.net/UGwmv/2/

$("button").click(function(){
   $("body").toggleClass("wait");
   return false; 
});

body.wait, body.wait *{
    cursor: wait !important;   
}

Когда тело имеет класс wait, все будет показывать курсор ожидания.

Ответ 2

если у вас есть обертка или контейнер:

<script type="text/javascript">
$(document).ajaxStart(function () {
    document.body.style.cursor = 'wait';
    $('div#wrapper').addClass('wait');
});

$(document).ajaxStop(function () {
    document.body.style.cursor = 'auto';
    $('div#wrapper').removeClass('wait');
});
</script>

<style type="text/css">
    div#wrapper.wait * {
        cursor: wait !important;
    }
</style>

В основном все дочерние элементы в оболочке получат cursor: wait с условием !important.

Ответ 3

другой ответ 2014:

если у вас есть хотя бы одна таблица стилей, измените ее!

измените таблицу стилей CSS:

sh = document.styleSheets[0]
Wait_a_bit="* {cursor: wait !important}"
sh.insertRule(Wait_a_bit, 0)

перед вашим ajax и удалите его потом:

sh.deleteRule(0)

Ответ 4

Проблема заключается в том, что класс перезапишет значение документа для курсора, чтобы избежать этого, вы должны убедиться, что все элементы, зависающие, покажут символ ожидания.

Лучше всего добавить класс в элемент body, когда вы хотите, чтобы символ ожидания для мыши, таким образом, из CSS, когда этот класс присутствует, вы установили все остальные классы, чтобы показать символ ожидания.

Когда ajax закончен, удалите класс из тега body и класс исходных элементов с различным стилем курсора.

$(document).ajaxStart(function () {
    $('body').addClass('wait');
});

$(document).ajaxStop(function () {
    $('body').removeClass('wait');
});



<style type="text/css">
    body.wait .move {
        cursor: wait;
    }
</style>

Ответ 5

Добавьте пустой элемент div#wait-overlay на свою страницу. Я предлагаю вам добавить его в конце вашего html-документа непосредственно перед закрывающим элементом <body>.

Задайте стиль этого элемента следующим образом (.active там специально):

div#wait-overlay.active
{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: wait;
    z-index: 100000;
    background: black;
    opacity: 0;
}

Затем добавьте следующий javascript:

$(document).ajaxStart(function () {
    $('#wait-overlay')
        .addClass('active')
        .animate({opacity: 0.6});
});

$(document).ajaxStop(function () {
    $('#wait-overlay')
    .animate(
        {
            opacity: 0
        },
        400,
        function () { $(this).removeClass('active'); }
    );
});

Объяснение:

div#wait-overlay - пустой div, поэтому он не отображается и, поскольку он находится в конце страницы, ничего не влияет.
Однако, если мы добавим класс active к этому div, он растянется на целая страница и благодаря очень высокой z-index охватывает все на странице. Дополнительным преимуществом этого является то, что все на странице становится непривлекательным.
javascript автоматически добавляет класс .active в начало ajax и удаляет его, когда заканчивается ajax. Кроме того, благодаря вызову animate страница постепенно затемняется при запуске ajax, и когда ajax завершается, он возвращается в нормальное состояние.

Ответ 6

    $(document).ajaxStart(function () {
        $('*').css('cursor', 'wait');
    });

    $(document).ajaxStop(function () {
        $('*').css('cursor', '');
    });

делает трюк.