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

Question

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

上面是我用来改变我的鼠标光标的代码,当下拉值改变时,问题是,光标确实变为了身体上的等待状态但是当我将鼠标悬停在链接上时,它仍然会变回来指针.即使在悬停链接等时,我如何能够使其继续显示等待状态？

Answer 1

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

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

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

此外,将所有游标恢复到他们被指派等待之前的状态将是一场噩梦.如果他们以前有内联样式,那么这些将被覆盖,您将无法将它们返回到先前的状态.

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

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

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

然后删除等待状态,你只需:

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

这涉及更少的DOM更改,并修复了锚悬停状态游标的问题.