最简单的方法设置光标等待，然后所有元素恢复 [英] Simplest way to set cursor to wait, then have all elements revert back

问题描述

在我的网站中，我有几个CSS类，当您将鼠标悬停在其上时设置固定类型的光标。我想将光标设置为等待图像，当我在页面上的任何地方进行AJAX调用，然后让它恢复到AJAX调用完成后应该是什么游标。

In my website, I have a few CSS classes that set a fixed type of cursor when you mouse over them. I want to set the cursor to the wait image when I make an AJAX call anywhere on the page and then have it revert back to whatever cursor it should be after the AJAX call is complete.

我试过：

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

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

当我的鼠标覆盖一个DOM对象时，

This doesn't work when my mouse is over a DOM object with a CSS class that changes the cursor and I'm stumped on how to make it do so.

目前我有一个类：

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

如果将鼠标悬停在此类中的对象上，

If you mouse over the object in this class, and an Ajax call starts, the cursor still stays as a pointer.

推荐答案

您可以使用组合切换身体和！important 。

You can use a combination of toggling a class on the body and !important.

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

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

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

当身体有等待类，一切都会显示等待游标。

When body has the wait class, everything will show the wait cursor.

这篇关于最简单的方法设置光标等待，然后所有元素恢复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！