title: inline style vs jQuery .css
body: <p>I came across an example of revealing a hidden div which is inside an element using css only</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #shopCart:hover .shopCartDetail {
      display: block;
  }
  &lt;/style&gt;
  
  &lt;div id="shopCart"&gt;
  Shop Cart
  &lt;div class="shopCartDetail"&gt;&lt;style&gt;.shopCartDetail {display:none}&lt;/style&gt;
      This is Shop Cart Detail&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Working example here <a href="http://jsfiddle.net/7DRTD/" rel="nofollow">http://jsfiddle.net/7DRTD/</a></p>
  
  <p>In my scenario, the style display:none is created by jQuery. Revealing the hidden div using hover does not work: <a href="http://jsfiddle.net/Z2mtF/" rel="nofollow">http://jsfiddle.net/Z2mtF/</a></p>
  
  <p>What can be the issue here? The html code looks same, both examples add inline style to the div. </p>
  
  <p>The question is: why does the second scenario not work?</p>
  
  <p>Thank you.</p>