javascript - 隐藏后删除鼠标存在

Question

我有一些代码可以在 2 秒没有移动后隐藏鼠标:

var justHidden = false;
var j;

function hideMouse() {
    $(document).mousemove(function() {
        if (!justHidden) {
            justHidden = false;
            clearTimeout(j);
            $('html').css({cursor: 'default'});
            j = setTimeout(hide, 1000);
        }
    });
}

function hide() {
    $('html').css({cursor: 'none'});
    justHidden = true;
    setTimeout(function() {
        justHidden = false;
    }, 500);
}

代码工作得很好，但是，它不会取消鼠标“存在”，所以如果我将鼠标悬停在一个元素上并且它被突出显示并停止移动 2 秒，同时仍在该元素上，悬停突出显示仍然是生效。

有什么方法可以删除鼠标“存在”，以便元素将删除它的悬停状态？

Answer 1

只需删除光标就可以做到这一点，它只会删除图标，不会删除功能。

有几种方法可以做到这一点，你可以使用 Pointer Lock API，但浏览器支持不是很好。
方法是创建一个不可见的元素，并将指针锁定在该元素中。

var elem = document.createElement('div');
elem.style.position = 'fixed';
elem.style.left = '-9999px';
document.body.appendChild(elem);

elem.requestPointerLock = 
    elem.requestPointerLock || 
    elem.mozRequestPointerLock || 
    elem.webkitRequestPointerLock;

elem.requestPointerLock();

JSBIN (点击“使用 JS 运行”)

然后是指针事件，有更好的支持

$('*').css({
    pointerEvents : 'none',
    cursor : 'none'
});

FIDDLE ;

最后一个选项是在覆盖整个窗口的页面顶部覆盖一个隐藏元素，这样所有其他元素都隐藏在它后面。它很简单，随处可用

$('<div />', {
    css: {
        position: 'fixed',
        height: '100%',
        width: '100%',
        top: 0,
        left: 0
    }
}).appendTo('body');

FIDDLE