Javascript 将光标悬停在整个html页面上_Javascript_Html_Css_Dynamic Css

Javascript 将光标悬停在整个html页面上

javascript html css

Javascript 将光标悬停在整个html页面上,javascript,html,css,dynamic-css,Javascript,Html,Css,Dynamic Css,可以用一种简单的方法在整个html页面上将光标设置为“wait”吗？这样做的目的是在ajax调用完成时向用户显示正在发生的事情。下面的代码显示了我尝试的简化版本，并演示了我遇到的问题：如果一个元素（#id1）设置了光标样式，它将忽略body上设置的光标样式（显然）某些元素具有默认的光标样式（a），并且不会在悬停时显示等待光标根据内容，body元素具有一定的高度，如果页面较短，则光标将不会显示在页脚下方测试： <html> <head> &l

可以用一种简单的方法在整个html页面上将光标设置为“wait”吗？这样做的目的是在ajax调用完成时向用户显示正在发生的事情。下面的代码显示了我尝试的简化版本，并演示了我遇到的问题：

如果一个元素（#id1）设置了光标样式，它将忽略body上设置的光标样式（显然）

某些元素具有默认的光标样式（a），并且不会在悬停时显示等待光标

根据内容，body元素具有一定的高度，如果页面较短，则光标将不会显示在页脚下方

测试：

<html>
    <head>
        <style type="text/css">
            #id1 {
                background-color: #06f;
                cursor: pointer;
            }

            #id2 {
                background-color: #f60;
            }
        </style>
    </head>
    <body>
        <div id="id1">cursor: pointer</div>
        <div id="id2">no cursor</div>
        <a href="#" onclick="document.body.style.cursor = 'wait'; return false">Do something</a>
    </body>
</html>

然后

<a href="#" onclick="document.body.className = 'wait'; return false">Do something</a>

此解决方案仅显示等待光标，但允许单击。

为什么不使用其中一种奇特的加载图形（例如：）？等待的光标是针对浏览器本身的-因此，每当它出现时，它都与浏览器有关，而不是与页面有关。

我知道您可能无法控制这一点，但您可能会选择一个“掩蔽”div，该div覆盖整个主体，z索引大于1。如果愿意，div的中心部分可以包含一条加载消息

然后，您可以将光标设置为等待div，而不必担心链接，因为它们“在”您的屏蔽div下。下面是一些“屏蔽div”的CSS示例：

身体{高度：100%；} div#mask{光标：等待；z索引：999；高度：100%；宽度：100%；}

这似乎在firefox中起作用

<style>
*{ cursor: inherit;}
body{ cursor: wait;}
</style>


*{游标：继承；}
正文{游标：等待；}

*部分确保光标在链接上悬停时不会更改。尽管链接仍然可以点击。

尝试css：

html.waiting {
cursor: wait;
}

如果属性

body

用作

html

的对应项，则它似乎不会在整个页面上显示等待光标。此外，如果您使用css类，您可以轻松控制它实际显示的时间。

如果您使用从Dorward发布的css的稍微修改版本

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

然后，您可以为所有ajax调用添加一些非常简单的操作：

$(document).ready(function () {
    $(document).ajaxStart(function () { $("html").addClass("wait"); });
    $(document).ajaxStop(function () { $("html").removeClass("wait"); });
});

或者，对于较旧的jQuery版本（1.9之前）：

我知道的最简单的方法是像这样使用JQuery：

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

今天我已经为这个问题挣扎了好几个小时。基本上，FireFox中的一切都很好，但（当然）IE中没有。在IE中，等待光标在执行耗时函数后显示

我终于在这个网站上找到了窍门：

代码：

我的代码在JavaScript类中运行，因此使用this和MyClass（MyClass是一个单例）

我在尝试显示本页所述的div时遇到了相同的问题。在IE中，它是在函数执行后显示的。所以我想这个技巧也能解决这个问题

非常感谢这篇文章的作者格伦格夫。你真的让我开心

css:

.waiting*{cursor:'wait'}

jQuery:

$（'body'）.toggleClass（'waiting'）
BlockUI是一切的答案。试试看
这里有一个更复杂的解决方案，不需要外部CSS：
function changeCursor(elem, cursor, decendents) {
    if (!elem) elem=$('body');

    // remove all classes starting with changeCursor-
    elem.removeClass (function (index, css) {
        return (css.match (/(^|\s)changeCursor-\S+/g) || []).join(' ');
    });

    if (!cursor) return;

    if (typeof decendents==='undefined' || decendents===null) decendents=true;

    let cname;

    if (decendents) {
        cname='changeCursor-Dec-'+cursor;
        if ($('style:contains("'+cname+'")').length < 1) $('<style>').text('.'+cname+' , .'+cname+' * { cursor: '+cursor+' !important; }').appendTo('head');
    } else {
        cname='changeCursor-'+cursor;
        if ($('style:contains("'+cname+'")').length < 1) $('<style>').text('.'+cname+' { cursor: '+cursor+' !important; }').appendTo('head');
    }

    elem.addClass(cname);
}

我使用了一种改编自的解决方案。它将在整个身体上显示一个透明的动画叠加等待div，单击将在可见时被等待div阻止：
css:
js:
html:

... html的其余部分。。。
我的两便士：
步骤1：
声明一个数组。这将用于存储分配的原始游标：
var vArrOriginalCursors = new Array(2);

步骤2：
实现cursorModifyEntirePage函数
 function CursorModifyEntirePage(CursorType){
    var elements = document.body.getElementsByTagName('*');
    alert("These are the elements found:" + elements.length);
    let lclCntr = 0;
    vArrOriginalCursors.length = elements.length; 
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        vArrOriginalCursors[lclCntr] = elements[lclCntr].style.cursor;
        elements[lclCntr].style.cursor = CursorType;
    }
}

函数CursorModifyEntirePage（CursorType）{
var elements=document.body.getElementsByTagName（'*'）；
警报（“这些是找到的元素：“+elements.length”）；
设LCNTR=0；
vArrOriginalCursors.length=elements.length；
对于（lcntr=0；lcntr

它的作用是：
获取页面上的所有元素。将分配给它们的原始游标存储在步骤1中声明的数组中。将光标修改为参数CursorType传递的所需光标
步骤3：
恢复页面上的游标
 function CursorRestoreEntirePage(){
    let lclCntr = 0;
    var elements = document.body.getElementsByTagName('*');
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        elements[lclCntr].style.cursor = vArrOriginalCursors[lclCntr];
    }
}

函数CursorRestoreEntirePage（）{
设LCNTR=0；
var elements=document.body.getElementsByTagName（'*'）；
对于（lcntr=0；lcntr

我已经在一个应用程序中运行了它，它运行得很好。
唯一需要注意的是，在动态添加元素时，我没有对其进行测试。
要从JavaScript为整个窗口设置光标，请使用：
document.documentElement.style.cursor = 'wait';

从CSS：
html { cursor: wait; }

根据需要添加进一步的逻辑。
这个纯JavaScript似乎工作得很好。。。在FireFox、Chrome和Edge浏览器上测试
如果你的页面上有过多的元素，而电脑速度又很慢，我不确定它的性能如何。。。试试看
将所有元素的光标设置为等待：
Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "wait");

将所有元素的光标设置回默认值：
Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "default");

另一种版本（可能可读性更强）是创建setCursor函数，如下所示：
function setCursor(cursor)
{
    var x = document.querySelectorAll("*");

    for (var i = 0; i < x.length; i++)
    {
        x[i].style.cursor = cursor;
    }
}

及
分别设置等待游标和默认游标。这通常会导致问题。在Firefox中，在整个页面上放置一个固定的div会导致整个页面变得不可访问。ie，你不能点击链接，因为你不是在点击链接，而是在点击链接前面的div。在firefox中可以正常工作。在IE中没有运气：（.在IE中，它的行为就像div不在那里一样。获得所需行为的唯一方法是在div背景上设置一个颜色。好的，在多玩一点之后，它最终与：div#mask一起工作{显示：无；光标：等待；z索引：9999；位置：绝对；顶部：0；左侧：0；高度：100%；宽度：100%；背景色：#fff；不透明度：0；过滤器
<body>
    <div id="waitMask" style="display:none;">&nbsp;</div>
    ... rest of html ...

var vArrOriginalCursors = new Array(2);

 function CursorModifyEntirePage(CursorType){
    var elements = document.body.getElementsByTagName('*');
    alert("These are the elements found:" + elements.length);
    let lclCntr = 0;
    vArrOriginalCursors.length = elements.length; 
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        vArrOriginalCursors[lclCntr] = elements[lclCntr].style.cursor;
        elements[lclCntr].style.cursor = CursorType;
    }
}

 function CursorRestoreEntirePage(){
    let lclCntr = 0;
    var elements = document.body.getElementsByTagName('*');
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        elements[lclCntr].style.cursor = vArrOriginalCursors[lclCntr];
    }
}

document.documentElement.style.cursor = 'wait';

html { cursor: wait; }

Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "wait");

Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "default");

function setCursor(cursor)
{
    var x = document.querySelectorAll("*");

    for (var i = 0; i < x.length; i++)
    {
        x[i].style.cursor = cursor;
    }
}

setCursor("wait");

setCursor("default");