如何删除：突然浏览器窗口失去焦点时从元素悬停？

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/