title: CSS :hover works only when mouse moves
body: <p>I created a very basic sample:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="bla"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#bla {
      width:400px;
      height:400px;
      background-color:green;
      display:none;
  }
  
  #bla:hover{
     background-color:red;
  }
  </code></pre>
  
  <p>As you can see it's a DIV that is initially hidden and changes color when mouse hovers over it.</p>
  
  <p>This JavaScript unhides it after 2 seconds</p>
  
  <pre><code>setTimeout(function() {
       document.getElementById('bla').style.display="block";
  },2000)
  </code></pre>
  
  <p>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.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/4XRUf/1/" rel="nofollow noreferrer">demo</a>. Run it and immediately place mouse over result pane.</p>
  
  <p>Is this by design? Is there a way (without JS preferable) to detect that DIV <em>is</em> hovered?</p>