How to update the cursor in the browser when the blocks under the cursor are updated but the cursor is still?

Question

css

Actually, here is an example jsfiddle.net/w1r9tvqx
If you hover over a gray square, it changes color.
If you hover over a small square, the cursor will become a pointer and the color of the large square will become the same.
Click on the square and it will disappear BUT the cursor will not change and the color of the big block will not change either.
If you already move the cursor or click, then everything will be fine.
Here is such a bug.
How can it be fixed?

Answer 1

In such cases Z-index won't help...
Small square should be removed completely either via fadeOut or callback...

$('div').click(function(){
    $('div').fadeOut(200)
});
$('div').click(function(){
    $(this).css({opacity: 0},function(){$(this).css({'display':'none'});})
});

Answer 2

$('div').click(function(){
    $('div').hide(400);
});