Javascript 转换后触发css悬停状态更改

我有一些UI包含javascript事件，这些事件会导致CSS更改，从而重新定位UI中的元素。我遇到了悬停状态的问题，在这些更改之后悬停状态不能正确更新。我在这里总结了一个非常简单的例子

将鼠标悬停在“block 1”上观察：“block 1”变为蓝色

单击“块1”观察：css更改会导致块翻转

观察：鼠标现在悬停在“block 2”上，但“block 1”仍为蓝色

预期行为：“块2”在变换后应为蓝色，“块1”应为红色

观察：非常轻微地移动鼠标会使其“正确”

$（函数（）{
$（'.block'）。单击（函数（）{
$（'.container'）.toggleClass（'flipped'）；
});
});
.container{
显示器：flex；
宽度：150px；
}
.翻了{
变换：旋转（180度）；
}
.街区{
高度：50px；
宽度：50px；
背景色：红色；
利润率：10px；
}
.block:悬停{
背景颜色：蓝色；
}

第一区
第2区
这个解决方案有点老套。它工作得并不完美，但它完成了任务

$(function() {
    $('.block').click(function () {
       $('.container').hide();
       $('.container').toggleClass('flipped');
       $('.container').show(0);
    });
});

隐藏容器，翻转容器，然后再次显示，会强制重新绘制页面的该部分，这似乎会再次触发
：hover
选择器

注意：在持续时间内传递
0
到
show（）
似乎是必要的

下面是一个演示：

我只关心firefox和chrome这个简化的例子，但最好是跨浏览器解决方案。在chrome中运行，我无法重现这个问题。我看到了预期的结果。好的，在这个例子中，windows上的Chrome似乎没有问题。它在IE 10、Chrome Mac和Firefox Mac中都可以复制。在我的实际问题中，现实生活中的问题并不简单——我甚至在Windows上的Chrome中也有这个问题。