Question

我有一些脚本在几秒钟没有移动后隐藏鼠标，所需的结果是每当鼠标被隐藏时它应该删除页面上的所有悬停状态元素。

为此，我有两个功能：

var body = $('body');
function hideMouse() {
    body.addClass("hideMouse");
    body.on('mousemove', function(){

        if(window.hiding) return true;
        window.hiding = true;
        body.removeClass("hideMouse");
        $('div.mouseHider').remove();
        clearTimeout(window.hideMouse);
        window.hideMouse = setTimeout(function(){
            body.addClass("hideMouse");
            $('<div class="mouseHider"></div>').css({
                position: 'fixed',
                top: 0,
                left: 0,
                height: '100%',
                width: '100%',
                zIndex: 99999
            }).appendTo(body);
            redraw(document.body);
            setTimeout(function(){
                window.hiding = false;
            }, 100);
        }, 4000);
    });
}

function redraw(e) {
    e.style.display = 'none';
    e.offsetHeight;
    e.style.display = 'block';
}

我也有很少的css规则：

body.hideMouse *, body.hideMouse{
    cursor: none;
}
body.hideMouse *{
    pointer-events: none;
}

正如所料，它在Chrome，Firefox和Opera中运行良好。然而，在IE11中，发生的事情是鼠标确实变得不可见，但悬停元素仍显示为悬停。

小提示： http://jsfiddle.net/wjbkgsbg/

在IE11中，鼠标被隐藏但div的不透明度仍为0.6而不是回落到1.

有什么建议吗？

Answer 1

IE11有点支持指针事件css属性

参考http://caniuse.com/#feat=pointer-events并查看已知问题

此SO线程也回答了您的问题css 'pointer-events' property alternative for IE

希望这可以帮助你指出正确的方向

不显示鼠标时删除元素的悬停状态

1 个答案: