如何移除:当浏览器窗口突然失去焦点时，悬停在元素上？

Question

例如:打开this simple jsfiddle并按如下方式放置窗口：

：然后将光标放在jsfiddle红色区域上，使其变为:hover (绿色)，然后将光标移动到另一个窗口。区域仍然是绿色的！如何避免这种情况？

Answer 1

您必须单击新窗口才能使悬停元素失去焦点。即使您将鼠标悬停在不同的窗口上，jsFiddle窗口仍具有焦点。在单击新窗口之前，窗口焦点不会改变。

Answer 2

我不认为您可以显式地删除:hover。你可以做的就是改变你的css，要求一些外部容器有一个类，然后在窗口失去焦点时删除它：

JS

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

CSS

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

小提琴：http://jsfiddle.net/johnkoer/932Km/11/​