title: CSS hover is not working with adjacent selector in chrome if the display property set none before
body: <p>I have 3 Divs  "<strong>button</strong>","<strong>enableButton</strong>" and a "<strong>tooltip</strong>" in my page. I have set <strong>display:none</strong> for the "button" by default. </p>
  
  <p>The <strong>display</strong> property of "<strong>button</strong>" will change to <strong>block</strong> on clicking the "<strong>enableButton</strong>" div. 
  I have some CSS definition that making the tooltip div's display block on mouse over the button. I used adjacent selector (+) with :hover pseudo selector to make the adjacent "tooltip" div visible.</p>
  
  <p>My problems is the tooltip is not showing on mouse over the button in <strong>chrome</strong>. It is working correctly in firefox. Can anybody help on this?. Thanks in advance.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="enableButton"&gt;Click to Enable Button&lt;/div&gt;
  &lt;br/&gt;
  
  &lt;div  style="display:none;" id="button"&gt;Button&lt;/div&gt;
  &lt;div class="tooltip"&gt;this is the tooltip&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#enableButton{cursor:pointer; color:red;}
  .tooltip{display:none; padding:5px; border:1px solid #ccc;}
  #button{cursor:pointer;}
  #button:hover+.tooltip{display:block;}
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$("#enableButton").click(function(){
      $("#button").show();    
  });
  </code></pre>
  
  <p>The code is in this <a href="http://jsfiddle.net/3gUtt/1/" rel="nofollow">fiddle</a></p>
  
  <p><em>Click the <strong>Click to Enable Button</strong> to make the button visible first and mouse over the button to get the issue</em></p>
  
  <p>On firefox the tooltip is showing correctly</p>