最简单的方法来设置光标等待，然后让所有元素恢复回来

问题描述：

在我的网站，我有几个CSS类，当你将鼠标放在它们上面时，它们会设置一个固定类型的光标。当我在页面上的任何位置进行AJAX调用时，我想将光标设置为等待图像，然后在AJAX调用完成后将其恢复为应该使用的任何游标。最简单的方法来设置光标等待，然后让所有元素恢复回来

我想：

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

$(document).ajaxStop(function() { 
    document.body.style.cursor = 'auto'; 
});

当我的鼠标在使用CSS类改变光标DOM对象，我难倒如何使它做到这不起作用。

目前，我有一个类：

.pills a:hover 
{ 
    background-color: #0069D6; 
    color: #FFFFFF; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); 
    text-decoration:none; 
    cursor:pointer; 
}

如果将鼠标悬停在这个类的对象，一个Ajax调用启动时，光标仍然停留作为一个指针。

'游标'样式作用于当前所在的元素（'mouseover'），如果特定元素具有不同的样式，则将显示该元素游标，因为它位于主体元素的上方。我能想到的另一种方法是在整个文档上显示叠加层，并将光标设置为“等待”并隐藏在“ajaxStop”上。 – 2012-04-24 20:24:49

FWIW，从直观的用户体验角度来看，除非是指出某些东西是可点击的，否则你真的不应该在第一时间搞乱光标。如果你正在等待通过ajax返回的东西，你应该包含一个微调。请参阅http://ajaxload.info – Jason 2012-04-24 20:34:10

答

您可以使用在body和!important切换一类的组合。

http://jsfiddle.net/UGwmv/2/

$("button").click(function(){ 
    $("body").toggleClass("wait"); 
    return false; 
});

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

当体内有wait类，一切都将显示等待光标。

光标在切换按钮下方不受影响。至少不在我的网页浏览器（FireFox）中。 – 2012-04-24 20:31:23

我相信这只是jsfiddle设置的结果。 – 2012-04-24 20:33:05

@RobinCastlin更新了小提琴。身体100％的高度可以修复这个问题。不知道这是否是jsfiddle之外的真实页面中的问题。 – 2012-04-24 20:37:46

答

，如果你有一个包装或容器：

<script type="text/javascript"> 
$(document).ajaxStart(function() { 
    document.body.style.cursor = 'wait'; 
    $('div#wrapper').addClass('wait'); 
}); 

$(document).ajaxStop(function() { 
    document.body.style.cursor = 'auto'; 
    $('div#wrapper').removeClass('wait'); 
}); 
</script> 

<style type="text/css"> 
    div#wrapper.wait * { 
     cursor: wait !important; 
    } 
</style>

Basicly所有儿童的包装将得到cursor: wait与!important条件。

值得注意的是！重要的声明可能会导致IE版本上的问题 – GillesC 2012-04-24 20:37:36

@gillesc什么样的问题。我知道一个用于IE6，但并不认为当前版本有任何问题。 – 2012-04-24 20:39:24

http://reference.sitepoint.com/css/importantdeclarations-除了IE6，另一个是次要情况“Internet Explorer 6和7重视声明，当使用非法标识符代替重要关键字时，而不是他们应该忽略这个声明。“和“在Internet Explorer 8中，如果选择器包含：first-letter或first-line伪元素，则忽略重要性声明。” – GillesC 2012-04-24 20:41:49

答

问题是，该类将覆盖光标的文档值，为避免这种情况，应确保所有元素在悬停时都显示等待符号。

最好的办法是当你想要鼠标的等待符号的时候，给body元素添加一个类，当CSS出现时，你将所有其他的类设置为显示等待符号。

当ajax完成后，从body标签中移除该类，并且具有各种光标样式的原始元素类将被恢复。

$(document).ajaxStart(function() { 
    $('body').addClass('wait'); 
}); 

$(document).ajaxStop(function() { 
    $('body').removeClass('wait'); 
}); 



<style type="text/css"> 
    body.wait .move { 
     cursor: wait; 
    } 
</style>

答

的其他答案2014：

解决方案，如果您有至少一个样式表，改变它！

变化的CSS样式表：

sh = document.styleSheets[0] 
Wait_a_bit="* {cursor: wait !important}" 
sh.insertRule(Wait_a_bit, 0)

你的Ajax之前和之后将其删除：

sh.deleteRule(0)

答

添加一个空元素div#wait-overlay到您的网页。我建议你在关闭<body>元素之前将它添加到你的html文档的末尾。

这样设置这个元素的样式（该.active有故意的）：

div#wait-overlay.active 
{ 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    cursor: wait; 
    z-index: 100000; 
    background: black; 
    opacity: 0; 
}

然后添加以下的javascript：

$(document).ajaxStart(function() { 
    $('#wait-overlay') 
     .addClass('active') 
     .animate({opacity: 0.6}); 
}); 

$(document).ajaxStop(function() { 
    $('#wait-overlay') 
    .animate(
     { 
      opacity: 0 
     }, 
     400, 
     function() { $(this).removeClass('active'); } 
    ); 
});

说明：

div#wait-overlay是空的div，因此它是不可见的，因为它位于页面的末尾，所以它不会影响任何内容。
然而，如果我们增加active类这个div，它绵延的整个页面，并感谢很高z-index覆盖网页上的所有内容。这样做的附加好处是页面上的所有内容都变得无法点击。
javascript在ajax start上自动添加.active类，并在ajax完成时将其删除。还要感谢致电animate，页面在ajax启动时逐渐变暗，并且当ajax完成时，它将恢复正常。

答

$(document).ajaxStart(function() { 
     $('*').css('cursor', 'wait'); 
    }); 

    $(document).ajaxStop(function() { 
     $('*').css('cursor', ''); 
    });

的伎俩。

最简单的方法来设置光标等待，然后让所有元素恢复回来

相关推荐