CODEWITHSUNDEEP
javascriptjquerycss
kfirba
kfirba

Reputation: 5441

removing mouse presence after hiding it

I've some code to hide the mouse after 2 seconds of no movements:

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

The code works perfectly fine, however, it doesn't cancel the mouse "presence", so if I hover on an element and it gets highlighted and stop moving for 2 seconds while still on the element, the hover highlight is still taking effect.

Is there any way I can also remove the mouse "presence" so the element will remove it's hover state?

Upvotes: 0

Views: 69

Answers (2)

LcSalazar
LcSalazar

Reputation: 16821

Just a simple idea, from the top of my head, didn't test it...

You could, along with hiding the cursor, add a class to the html, say .no-cursor.

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

And then, you subject the :hover rules to a condition of the html not having this class:

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

EDIT

Actually, then, why not let this class hide the cursor?

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

And just:

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

Upvotes: 0

adeneo
adeneo

Reputation: 318182

Just removing the cursor does exactly that, it removes the icon only, and not the functionality.

There are a few ways to do this, you can use the Pointer Lock API, but browser support is not very good.
The way to do it, is to create an element that's not visible, and lock the pointer in that element.

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 (hit "Run with JS")

Then there's pointer events, with somewhat better support

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

FIDDLE;

The last option would be to overlay a hidden element on top of the page that covers the entire window, that way all the other elements are hidden behind it. It's simple and works everywhere

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

FIDDLE

Upvotes: 2

Related Questions