javascript - 您如何强制 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/ - 当您单击“一个”时，元素会移动，因此不应再应用“:hover”样式，但它们实际上不会更新，直到您在单击后移动鼠标。

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

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

Answer 1

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

http://jsfiddle.net/4tfYN/