$("#sales-period").on("change", function () {
$("body").css("cursor", "wait");
});
上面是我用来更改鼠标光标的代码,当下拉值更改时,问题是,光标确实在正文上更改为等待状态,但是当我将鼠标悬停在链接上时,它仍然变回来到指针。即使在悬停链接等时,我如何强制它继续显示等待状态。
$("#sales-period").on("change", function () {
$("body").css("cursor", "wait");
});
上面是我用来更改鼠标光标的代码,当下拉值更改时,问题是,光标确实在正文上更改为等待状态,但是当我将鼠标悬停在链接上时,它仍然变回来到指针。即使在悬停链接等时,我如何强制它继续显示等待状态。
正如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 更改,并解决了锚悬停状态光标的问题。
使用CSS 通用选择器 *
选择页面上的所有元素:
$("*").css("cursor", "wait");
为了获得更好的性能,您只能定位具有不同光标的标签,例如链接或您自己更改光标的其他标签。
要恢复到常规游标,请使用:
$("*").css('cursor','auto');
您需要为所有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
尝试这个
jQuery( "*" ).css("cursor", "wait");