Why isn't .is(":hover") working?

Question

I have this code to fade out some stuff on a page after you don't move your mouse for a second or so:

idleTime = 0;
var idleInterval = setInterval(function() { 
    idleTime++;
    if (idleTime > 1) {
        var isHovered = $('.fade-outs').is(":hover");
        if(isHovered == false) {
            $('.fade-outs').stop().fadeOut();
        }
    }
}, 1000);
$(document).bind('mousemove mousedown', function(e) {
    idleTime = 0;
    $('.fade-outs').fadeIn();
});

But, I am getting the following error with $('.fade-outs').is(":hover"); part:

Error: Syntax error, unrecognized expression: hover [http://localhost:5545/assets/js/jquery.min.js:3]

Does anyone know why I am getting this error?

@techfoobar Oh, there isn't? The accepted answer on this is *wrong* then... http://stackoverflow.com/a/8981521/507629 — Nathan, Sep 30 '12 at 06:15
Actually, it appears to be correct. The [jsFiddle](http://jsfiddle.net/Meligy/2kyaJ/3/) is working with `:hover`. — Nathan, Sep 30 '12 at 06:17
The accepted answer is correct. It uses a class named `hover` and the `.hover` (with the dot) selector which is correct. — techfoobar, Sep 30 '12 at 06:20
The [accepted answer here](http://stackoverflow.com/a/8981521/507629) is using a colon (`:hover`). Take a look at the [jsFiddle example](http://jsfiddle.net/Meligy/2kyaJ/3/) in the answer. — Nathan, Sep 30 '12 at 06:22
The `:hover` psuedo class is applied by JS (not jQuery) on some elements and cannot be used reliably (some versions of IE don't add it to anything other than `` tags for example) — techfoobar, Sep 30 '12 at 06:22

Blender · Answer 1 · 2012-09-30T06:25:39.810

3

I would try something like this instead:

var idleTimer;

function startTimer() {
    stopTimer();

    idleTimer = setInterval(function() {
        $('.fade-outs').stop().fadeOut();
    }, 1000);
}

function stopTimer() {
    idleTimer && clearInterval(idleTimer);
}

$(document).on('mousemove', startTimer);

$('.fade-outs').on({
    mouseleave: startTimer,
    mouseenter: stopTimer,
    mousemove: function(e) {
        e.stopPropagation();
    }
});

Demo: http://jsfiddle.net/Blender/urzug/4/

edited Sep 30 '12 at 06:25

answered Sep 30 '12 at 06:07

Blender

289,723
53
439
496

Hi Blender, would you be kind enough to explain this line for me `idleTimer && clearInterval(idleTimer);` within the stopTimer function. Is this a shorthand I've been missing out on in JS? – David Barker Sep 30 '12 at 06:19
In JS, the `&&` operator short-circuits, which means that if the left-hand-side is `false`, the right-hand-side won't be evaluated at all (either way the resulting value will be `false`). If `idleTimer` doesn't have a value, `idleTimer` is not truthy so the operator short-circuits and `clearInterval` is not called. If `idleTimer` is defined, `clearInterval` is called. `a && b` is the same as `a ? a : b` (if you know about ternary operators). – Blender Sep 30 '12 at 06:23
I do indeed but I've not seen them written like this before. It makes perfect sense thinking about it as you are calling a function in a condition and therefore no need for true/false variable assignment... thank you for the explanation, this will help me. – David Barker Sep 30 '12 at 06:24
Thanks for the answer, I decided to go with the other one but this one is good as well so I have up voted it. Nice shorthand trick in JS with the `&&` operator - never knew about it! – Nathan Sep 30 '12 at 06:28

score 1 · Accepted Answer · answered Sep 30 '12 at 05:52

Try changing it to this:

idleTime = 0;
var idleInterval = setInterval(function() { 
idleTime++;
if (idleTime > 1) {
    var isHovered = $('.fade-outs').is(".hover");
    if(isHovered == false) {
        $('.fade-outs').stop().fadeOut();
    }
}
}, 1000);
$(document).bind('mousemove mousedown', function(e){
  idleTime = 0;
  $('.fade-outs').fadeIn();
});
$('.fade-outs').hover(funciton() { $(this).toggleClass('hover') });

Why isn't .is(":hover") working?

2 Answers2