How can you force chrome on linux to recalculate/re-render “:hover” styling?

Question

I have a situation where javascript code causes DOM/style changes that in turn should cause the page to render differently due to a change in the element that is under the mouse. A simple example is:

<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>

See http://jsfiddle.net/Lq7Ac/1/ - when you click "One" the elements move so that the ":hover" styling should no longer be applied, but they don't actually get updated until you move the mouse after the click.

Is there something I can do in the "click" binding to recalculate/re-render immediately?

Update : This appears to only affect chrome on linux. So possibly a bug in chrome. Still, if anyone has ideas about working around this it would be great to hear them.

Answer 1

Could try doing it with css classes, instead of the :hover selector.

http://jsfiddle.net/4tfYN/