Jquery show & hide not working but native change to style.display does work
<p>Why does toggling display between block/none work but jQuery show/hide does not?</p>

<p>Javascript:</p>

<pre><code>&lt;div style="width: 100px; height: 100px; background-color: red;"
     onmouseover="document.getElementById('div1').style.display = 'block';" 
     onmouseout="document.getElementById('div1').style.display = 'none';"&gt;
   &lt;div id="div1" style="display: none;"&gt;Text&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;

&lt;div style="width: 100px; height: 100px; background-color: red;" 
     onmouseover="$('#div1').show();" onmouseout="$('#div1').hide();"&gt;
   &lt;div id="div1" style="display: none;"&gt;Text&lt;/div&gt;
&lt;/div&gt;
</code></pre>
