Можно ли установить курсор на "wait" на всей странице html простым способом? Идея состоит в том, чтобы показать пользователю, что что-то происходит, когда выполняется вызов ajax. В приведенном ниже коде представлена упрощенная версия того, что я пробовал, а также демонстрирую проблемы, с которыми я сталкиваюсь:
- если элемент (# id1) имеет установленный стиль курсора, он игнорирует тот, который установлен на теле (очевидно)
- некоторые элементы имеют стиль курсора по умолчанию (a) и не будут показывать курсор ожидания при зависании
- элемент body имеет определенную высоту в зависимости от содержимого, а если страница короткая, курсор не будет отображаться ниже нижнего колонтитула
Тест:
<html>
<head>
<style type="text/css">
#id1 {
background-color: #06f;
cursor: pointer;
}
#id2 {
background-color: #f60;
}
</style>
</head>
<body>
<div id="id1">cursor: pointer</div>
<div id="id2">no cursor</div>
<a href="#" onclick="document.body.style.cursor = 'wait'; return false">Do something</a>
</body>
</html>
Далее отредактируйте... Он работал в firefox и IE с помощью:
div#mask { display: none; cursor: wait; z-index: 9999;
position: absolute; top: 0; left: 0; height: 100%;
width: 100%; background-color: #fff; opacity: 0; filter: alpha(opacity = 0);}
<a href="#" onclick="document.getElementById('mask').style.display = 'block'; return false">
Do something</a>
Проблема с (или особенностью) этого решения заключается в том, что он предотвратит клики из-за перекрывающегося div (спасибо Kibbee)
Позже позже отредактируйте...
Более простое решение от Dorward:
.wait, .wait * { cursor: wait !important; }
а затем
<a href="#" onclick="document.body.className = 'wait'; return false">Do something</a>
Это решение показывает только курсор ожидания, но позволяет клики.
