更改整个页面的鼠标光标？

问题描述：

我有一个拖动UI程序，其中可拖动元素上的鼠标光标变为点击抓取手。更改整个页面的鼠标光标？

的问题是，我让拖动到屏幕上的任何地方发生，并在锚标记，等光标变为...

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

有没有简单易用的代码处理方法？

参见：http://stackoverflow.com/questions/192900/wait-cursor-over-entire-html-page –

答

做它的CSS级别：

* { 
    cursor: pointer; 
}

做jQuery的力量它遍历DOM中的每一个节点，并重写它的CSS类。在一份长文件中，这是浪费时间。

但是，这将始终是积极的。光标只需在鼠标关闭时更改。它需要以某种方式在Javascript中发生。 – Wesley

您可以通过javascript动态添加/删除css规则。只需从onmousedown/onmouseup中完成，它应该比从页面上的每个dom节点添加/删除类都快。 –

@Mark B酷。你能用一个例子提供一个新的答案吗？我会给它一个镜头，如果它的工作正确，我会标记它。 – Wesley

答

试试这个

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

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

// EDITED ANSWER

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

如果Firebug是上，您可以看到在机身风格标签的变化。但有些如何不起作用。你可以把它作为参考，并尝试类似的方法获得解决方案。

不会雇用zIndex的元素重写？ –

@MikeChristensen正确。这不会做到这一点。 – Wesley

答

我能想到做到这一点的唯一方法是相当黑客。

创建一个D-Z，其索引高于该页面上所有内容的Z值，并且具有所需的光标。只要鼠标光标关闭，就启用该div。示例代码：

<html><body style="width: 100%; height: 100%;"> 
<DIV id="cover" style="position: absolute; width: 100%; height: 100%; zindex: 5000; top: 0px; left: 0px; cursor: pointer; background: transparent; display: none;">&nbsp;</div> 

<ul><li>One</li><li>Two</li><li>Three</li></ul> 

<script> 
    window.document.body.onmousedown = function() 
    { 
     document.getElementById('cover').style.display = ''; 
    }; 

    window.document.body.onmouseup = function() 
    { 
     document.getElementById('cover').style.display = 'none'; 
    }; 
</script> 

</body></html>

更改整个页面的鼠标光标？

相关推荐