javascript 更改整个页面的鼠标光标?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7742655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 01:08:00  来源:igfitidea点击:

Change Mouse Cursor for whole page?

javascriptjqueryhtmlcss

提问by Wesley

I have a drag UI program, where the mouse cursor on the draggable element changes to a grabbing hand on click.

我有一个拖动 UI 程序,其中可拖动元素上的鼠标光标在单击时变为抓手。

The problem is, I allow the drag to happen anywhere on screen, and the cursor changes over anchor tags, etc...

问题是,我允许拖动发生在屏幕上的任何地方,并且光标会在锚标签上发生变化,等等......

I've tried $('*').addClass('grabbing'), but it's REALLY expensive.

我试过了$('*').addClass('grabbing'),但它真的很贵。

Is there a simple easy code efficient way to handle this?

有没有一种简单的代码有效的方法来处理这个问题?

采纳答案by Marc B

Do it at the CSS level:

在 CSS 级别执行此操作:

* {
   cursor: pointer;
}

doing it in jquery forces it to iterate every single node in the dom and rewrite its css classes. On a long document, that's a huge waste of time.

在 jquery 中执行它会强制它迭代 dom 中的每个节点并重写其 css 类。在一个很长的文档上,这是一种巨大的时间浪费。

回答by Vikas Naranje

try this

试试这个

$('body').addClass('grabbing');

OR

或者

$(document).addClass('grabbing');

//EDITED ANSWER

//编辑的答案

$('body').mousedown(function(e){
    $(this).css({'cursor':'pointer'});
}).mouseup(function(e){
    $(this).css({'cursor':'auto'});
});

If you firebug is on, you can see the changes in body style tag. But some how it's not working. You can take it as a reference and try similar approach the get solution.

如果您打开了萤火虫,您可以看到 body 样式标签的变化。但有些方法不起作用。您可以将其作为参考并尝试与 get 解决方案类似的方法。

回答by Robert Daniels

I tried most of these, but not all elements will display the cursor. The quick and dirty method is to iterate the entire dom and set the cursor for each element.

我尝试了其中的大部分,但并非所有元素都会显示光标。快速而肮脏的方法是迭代整个dom并为每个元素设置光标。

document.querySelectorAll('*').forEach(function(node) {
    node.style.cursor = 'progress';
});

Execute ajax or whatever here....Followed by:

在此处执行 ajax 或其他任何内容....其次是:

document.querySelectorAll('*').forEach(function(node) {
    node.style.cursor = 'default';
});

回答by Makan

Though this is not a direct answer to this question but I want to draw attentions to that we can solve the problem differently.

虽然这不是对这个问题的直接回答,但我想提请注意,我们可以以不同的方式解决问题。

By putting an empty fullscreen div on top of everything except drop zones, activate it after mousedownevent. So we can simply change cursor for entire screen through :hoverclass of that div .

通过在除拖放区之外的所有内容之上放置一个空的全屏 div,在mousedown事件发生后激活它。因此,我们可以通过:hover该 div 的类简单地更改整个屏幕的光标。