如何强制 linux 上的 chrome 重新计算/重新渲染 ":hover" 样式？

Question

我有一种情况，其中 javascript 代码导致 DOM/样式更改，由于鼠标下方元素的更改，这反过来又会导致页面呈现不同的方式。一个简单的例子是：

<style type="text/css">
#one {
    position: relative;
}
#two {
    background-color: green;
    display: none;
}
#one:hover #two {
    display: block;
}
</style>

<script type="text/javascript">
$(window).load(function(){
    $('#one').on('click', function() {
        $('#one').css('left', '100px');
    });
});
</script>

<div id="one">One
    <div id="two">Foo</div>
</div>

请参阅http://jsfiddle.net/Lq7Ac/1/ - 当您单击“One”时，元素会移动，因此不应再应用“:hover”样式，但它们实际上不会更新，直到您在单击后移动鼠标。

我可以在“点击”绑定中做些什么来立即重新计算/重新渲染？

更新：这似乎只影响 linux 上的 chrome。所以可能是chrome中的一个错误。不过，如果有人有解决此问题的想法，很高兴听到他们的声音。

Answer 1

可以尝试使用 css 类来代替 :hover 选择器。

http://jsfiddle.net/4tfYN/