Question

我需要将鼠标指针更改为等待光标。我试过了

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

在我的fiddle中，我的鼠标光标没有改变（在我的主应用程序中也没有改变）。我尝试了几种方法，但似乎没有任何工作（IE7和FF7测试）。如何更改光标？如果效果更好，我愿意使用CSS代替JavaScript。

对于它的价值......在最终的程序中，我需要在AJAX调用开始时更改指针，然后将其更改回回调中的默认值。但是，这是一个简化的例子，仍然不起作用。

Answer 1

我创建了一个CSS类：

.busy {
    cursor: wait !important;
}

然后将此类分配给body或要标记为busy的任何元素：

$('body').addClass('busy');
// or, if you do not use jQuery:
document.body.className += ' busy';

http://jsfiddle.net/ThiefMaster/S7wza/

如果您需要在整个页面上显示，请参阅Wait cursor over entire html page了解解决方案

Answer 2

由于没有文字你没有真正的身体（就“它没有身高”而言）。

尝试添加一些内容，然后将文本悬停：http://jsfiddle.net/kX4Es/4/。你可以使用CSS。

或者，将其添加到<html>元素以绕过此<body>约束：http://jsfiddle.net/kX4Es/3/。

html {
    cursor: wait;
}

Answer 3

你宣布它是一个功能吗？

function cursor_wait() {
    document.body.style.cursor = 'wait';
}

然后致电

cursor_wait();

在你的剧本中？

Answer 4

像这样：

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

或者作为上面的 ThiefMaster

的CSS类

Answer 5

我只在chrome和firefox中试过这个，所以它可能无处不在。但如果你想用javascript做这个并打开和关闭它试试这个。

//add
document.styleSheets[1].insertRule('html {cursor:wait;}',document.styleSheets[1].cssRules.length);
//for firefox I had to tell it to fill the screen with the html element
//document.styleSheets[1].insertRule('html {height:100%;width:100%;cursor:wait;}',0);

//remove
document.styleSheets[1].deleteRule(document.styleSheets[1].cssRules.length-1);

http://www.quirksmode.org/dom/w3c_css.html#access似乎是搞乱实际样式表的好参考。我希望有一个更好的方法来编辑html元素样式，但这就是我能找到的......

如何更改鼠标指针？

5 个答案: