CODEWITHSUNDEEP
javascriptjquerymagic-methods
scythargon
scythargon

Reputation: 3491

how to remove :hover from element when suddenly browser window lost focus?

For example: open this simple jsfiddle and place your windows like this: this: Then place cursor over the jsfiddle red region to make it :hover (green) and now move cursor to the other window. Region still green! How to avoid of it?

Upvotes: 1

Views: 1286

Answers (2)

John Koerner
John Koerner

Reputation: 38077

I don't think you can explicitly remove the :hover. What you could do is change your css to require some outer container having a class and then remove that when the window loses focus:

JS

$(window).focus(function () {
    $("#outer").addClass('focusedContainer');
});
$(window).blur(function () {
    $("#outer").removeClass('focusedContainer'); 
});​

CSS

.button{
    background: red;
}
.focusedContainer>.button:hover{
    background: green;
}

Fiddle: http://jsfiddle.net/johnkoer/932Km/11/ ​

Upvotes: 0

Lowkase
Lowkase

Reputation: 5699

You have to click on the new window in order for the hover element to lose focus. The jsFiddle window still has focus, even when you hover over a different window. Window focus won't change until you click on the new window.

Upvotes: 3

Related Questions