私は、ドラッグ可能な要素上のマウスカーソルがクリックで手をつかむように変化する、ドラッグUIプログラムを持っています。ページ全体のマウスカーソルを変更しますか？
問題は、私はなど、ドラッグは、画面上のどこにでも発生することができ、かつアンカータグの上にカーソルが変化し、ある...
私は$('*').addClass('grabbing')を試してみたが、それは本当に高価です。
これを処理する簡単なコードは効率的な方法はありますか？放火犯がオンになっているあなた、あなたはボディスタイルタグの変化を見ることができる場合
はCSSレベルでそれを実行します。
* {
cursor: pointer;
}
は、DOM内のすべての単一のノードを反復処理し、そのCSSクラスを書き換えることjqueryの力でそれをやって。長い文書では、それは時間の無駄です。
この
$('body').addClass('grabbing');
OR
$(document).addClass('grabbing');
// EDITED ANSWERに
$('body').mousedown(function(e){
$(this).css({'cursor':'pointer'});
}).mouseup(function(e){
$(this).css({'cursor':'auto'});
});
を試してみてください。しかし、それがうまくいかないものもあります。あなたは参照としてそれを取ることができ、同様のアプローチを取得するソリューションを取得します。
はのZIndexの要素がそれを上書き雇うないだろうか？ –
@MikeChristensen修正。これはそれほど効果はありません。 – Wesley
私がこれを行うと考えることができる唯一の方法はかなりハッキーです。
そのページの他のすべてのものよりも高いZインデックスを持つDIVを作成し、必要なカーソルを持っています。マウスカーソルが下がるたびにその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;"> </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>
も参照してください：http://stackoverflow.com/questions/192900/wait-cursor-over-entire-html-page –