2
$("#sales-period").on("change", function () {
    $("body").css("cursor", "wait");
});

上面是我用来更改鼠标光标的代码,当下拉值更改时,问题是,光标确实在正文上更改为等待状态,但是当我将鼠标悬停在链接上时,它仍然变回来到指针。即使在悬停链接等时,我如何强制它继续显示等待状态。

4

4 回答 4

10

正如Yotam 发布的那样,您可以通过执行以下操作来覆盖每个元素的 csscursor样式:

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

然而,这是非常昂贵的,因为必须为页面上的每个元素更改 DOM。

另外,将所有游标返回到它们被分配等待之前的状态将是一场噩梦。如果它们以前具有内联样式,那么这些样式将被覆盖,您将无法将它们返回到以前的状态。


因此,我建议向 中添加一个类body,然后在您的 CSS 中进行所有更改:

$("body").addClass("waiting");

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

然后要删除等待状态,您只需执行以下操作:

$("body").removeClass("waiting");

这涉及更少的 DOM 更改,并解决了锚悬停状态光标的问题。

于 2013-07-08T14:32:16.520 回答
2

使用CSS 通用选择器 *选择页面上的所有元素:

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

为了获得更好的性能,您只能定位具有不同光标的标签,例如链接或您自己更改光标的其他标签。

要恢复到常规游标,请使用:

$("*").css('cursor','auto');
于 2013-07-08T14:28:52.837 回答
1

您需要为所有html元素重置 CSS。body您已为元素设置光标。但是a元素有默认的指针光标。

试试这个style.css文件

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

用于显示/隐藏等待光标的 Jquery 代码:

$("body").addClass("wait"); // to add wait cursor

$("body").removeClass("wait"); // to remove wait cursor
于 2013-07-08T14:30:34.857 回答
0

尝试这个

jQuery( "*" ).css("cursor", "wait");
于 2013-07-08T14:30:40.460 回答