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);
}

代码工作得很好，但是，它不会取消鼠标＆＃34;存在＆＃34;，所以如果我将鼠标悬停在某个元素上并突然显示并停止移动2秒元素，悬停突出显示仍然生效。

有什么方法可以删除鼠标＆＃34;存在＆＃34;所以该元素将删除它的悬停状态？

Answer 1

只需删除光标就可以了，它只删除图标，而不删除功能。

有几种方法可以使用指针锁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

Answer 2

从头脑中，只是一个简单的想法，没有测试它......

你可以在隐藏光标的同时在html中添加一个类，比如.no-cursor。

function hide() {
    $('html').css({cursor: 'none'}).addClass("no-mouse");
    //...

然后，您将:hover规则置于html没有此类的条件下：

html:not(.no-mouse) div:hover {
    /*Not affecting when mouse is hidden */
}

修改

实际上，为什么不让这个类隐藏光标呢？

html.no-cursor { cursor: none !important; }

只是：

function hide() { $('html').addClass("no-mouse");

隐藏它后删除鼠标

2 个答案: