Code works in console, but not in head
<p>When I enter this script in the Google Chrome console...</p>

<pre><code>&lt;script&gt;
    $(document).ready(function() {  
        $("div").hover(
            function() { $("&gt; span", this).show(); },
            function() { $("&gt; span", this).hide(); 
        });
    });
&lt;/script&gt;
</code></pre>

<p>... it works and no problem.</p>

<p>When I add this between <code>&lt;head&gt;&lt;/head&gt;</code> it does not work.</p>

<p>Can anyone tell me why?</p>

<p><strong>UPDATE</strong></p>

<pre><code>&lt;script type="text/javascript"&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");&lt;/script&gt;
     &lt;script type="text/javascript" lang="javascript"&gt;
    $(document).ready(function()
{
    $('div').hover(function()
    {
        $('&gt; span', this).show();
    }, function()
    {
        $('&gt; span', this).hide();
    });
});
    &lt;/script&gt;
    &lt;script type="text/javascript" lang="javascript"&gt;

    $.getJSON("http://twitter.com/statuses/user_timeline/username.json?callback=?&amp;count=5", function(data) {

  $.each(data, function(index, value) { 
 $('.tweets').append('&lt;div id='+data[index].id+'&gt;'+data[index].text+'&amp;nbsp&lt;span style="display:none"class="hideTweeterIcons"&gt;&lt;a href="https://twitter.com/intent/tweet?in_reply_to='+data[index].id+'"&gt;&lt;img src="//si0.twimg.com/images/dev/cms/intents/icons/reply.png"&gt;&lt;/a&gt;&lt;a href="https://twitter.com/intent/retweet?tweet_id='+data[index].id+'"&gt;&lt;img src="//si0.twimg.com/images/dev/cms/intents/icons/retweet.png"&gt;&lt;/a&gt;&lt;a href="https://twitter.com/intent/favorite?tweet_id='+data[index].id+'"&gt;&lt;img src="https://si0.twimg.com/images/dev/cms/intents/icons/favorite.png"&gt;&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;hr&gt;');

});     
});

    &lt;/script&gt;
</code></pre>
