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

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 中，鼠标确实如预期的那样变得不可见，但悬停元素仍显示为悬停状态。

演示的 fiddle : http://jsfiddle.net/wjbkgsbg/

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

有什么建议吗？

Answer 1

IE11 对 pointer-events css 属性的支持有点不稳定

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

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

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