0

I got some script that hides the mouse after few seconds of no movement and the desired result is that whenever the mouse is being hidden it should remove all of the hover state elements on the page.

To do so, I've got two functions:

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

I also have few css rules:

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

As expected, it works just fine in Chrome, Firefox and Opera. However, in IE11, what happens is that the mouse is indeed becoming invisible as expected but hover elements still shown as hovered.

A fiddle to demonstrate: http://jsfiddle.net/wjbkgsbg/

In IE11, the mouse is being hidden but the div's opacity remains 0.6 instead of falling back to 1.

Any suggestions?

kfirba
  • 5,231
  • 14
  • 41
  • 70
  • when tested in my local ie11 my mouse did not get disabled either....can yu clarify that? – Sai Nov 05 '14 at 17:18
  • @Sai it seems that you are right. However, this is the same exact code I'm using locally and the mouse is indeed being disabled. I will look into it. – kfirba Nov 05 '14 at 17:24

1 Answers1

0

IE11 kinda has iffy support for the pointer-events css property

refer http://caniuse.com/#feat=pointer-events and see known issues

also this SO thread answers your question css 'pointer-events' property alternative for IE

hope this helps you point at the right direction

Community
  • 1
  • 1
Sai
  • 1,889
  • 5
  • 18
  • 26
  • also refer http://msdn.microsoft.com/en-us/library/ie/dn433244(v=vs.85).aspx and see if a workaround is possible for IE – Sai Nov 05 '14 at 17:25
  • @kfirba - http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements answers your question, i think – Sai Nov 05 '14 at 17:27
  • Thanks for the answer. I'm afraid that it has nothing to do with the `pointer-events`. I got to that conclusion when I decided to check it and removed the CSS rule for that. Chrome still behave as expected and IE shows the same behavior like before. – kfirba Nov 05 '14 at 17:28
  • i think it is dependent on your pointer-event because if i understand your code correctly, when you hover over a div ( sensing mouseenter) the div reduces opacity. Now after a set timeout, the mouse is disabled thru pointer event. but in IE that never occurs hence the div stays with the lesser opacity – Sai Nov 05 '14 at 17:31
  • The mouse is not really being disabled, it just being hidden. therefore, the mouse is actually still there which results in the hover effect. What I tried to do is to inject an element to the `body` which covers the whole page and then redraw the page, this way, now my hidden mouse is hovering over the injected element. – kfirba Nov 05 '14 at 17:34