javascript - 在网页的每个部分更改鼠标光标

Question

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

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

Answer 1

正如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 更改，并解决了锚悬停状态光标的问题。

Answer 2

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

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

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

要恢复到常规游标，请使用：

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

Answer 3

您需要为所有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

Answer 4

尝试这个

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