Можно ли использовать JavaScript, чтобы установить атрибут cursor
для свойства none
, если мышь неактивна в течение определенного периода времени (скажем, пять секунд), и установить его обратно в auto
, когда он станет снова активен?
РЕДАКТИРОВАТЬ: Я понимаю, что none
не является допустимым значением для свойства cursor
. Тем не менее, многие веб-браузеры, кажется, поддерживают его. Кроме того, основным пользователем этого является я, поэтому в результате возникает небольшая вероятность путаницы.
У меня есть два скрипта, которые могут делать что-то похожее:
window.addEventListener("mousemove",
function(){
document.querySelector("#editor").style.background = "#000";
setTimeout("document.querySelector('#editor').style.background = '#fff'", 5000);
}
, true);
и
var timeout;
var isHidden = false;
document.addEventListener("mousemove", magicMouse);
function magicMouse() {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function() {
if (!isHidden) {
document.querySelector("body").style.cursor = "none";
document.querySelector("#editor").style.background = "#fff";
isHidden = true;
}
}, 5000);
if (isHidden) {
document.querySelector("body").style.cursor = "auto";
document.querySelector("#editor").style.background = "#000";
isHidden = false;
}
};
Для каждого из них, когда мышь неактивна более пяти секунд, цвет фона становится белым, а при перемещении курсора фон становится черным. Однако они не работают, чтобы заставить курсор исчезнуть. Что меня удивляет, так это то, что если я введу команду document.querySelector("body").style.cursor = "none";
в консоль JavaScript, она будет работать отлично. Внутри скриптов это не похоже на работу.
Я опубликовал вышеупомянутые сценарии, поскольку дошел до того, чтобы заставить это работать. Я не обязательно прошу исправить ни один из сценариев; если вам известен более эффективный способ скрыть курсор, поделитесь.