CSS :hover works only when mouse moves

I created a very basic sample:

HTML

<div id="bla"></div>

CSS

#bla {
    width:400px;
    height:400px;
    background-color:green;
    display:none;
}

#bla:hover{
   background-color:red;
}

As you can see it's a DIV that is initially hidden and changes color when mouse hovers over it.

This JavaScript unhides it after 2 seconds

setTimeout(function() {
     document.getElementById('bla').style.display="block";
},2000)

But if you place your mouse over location where the DIV is about to appear - when it appears - it appears in unhovered state. Only when you actually move the mouse - hover effect takes place.

Here's a demo. Run it and immediately place mouse over result pane.

Is this by design? Is there a way (without JS preferable) to detect that DIV is hovered?