Hide/Show element on mouseover/out using jquery
<p>On a page there are multiple elements like this</p>

<pre><code>&lt;h1 class="bodyText hide"&gt;1&lt;/h1&gt;
&lt;h1 class="bodyText hide"&gt;2&lt;/h1&gt;
&lt;h1 class="bodyText hide"&gt;3&lt;/h1&gt;
</code></pre>

<p>and</p>

<pre><code>.hide{
    display:none;
}

.bodyText {

}
</code></pre>

<p>Now when mouse enteres the bodyText element the text should fade in and out when mouse leaves the element. What I tried:</p>

<pre><code>$('.bodyText').on('mouseover', function(event){
    $(this).fadeIn();
});

$('.bodyText').on('mouseout', function(event){
    $(this).fadeOut();
});
</code></pre>

<p>This does absolutely nothing. Any ideas how to do this? </p>

<p>I want to achieve this kind of effect: <a href="http://www.google.com/intl/de/about/datacenters/gallery/index.html#/" rel="nofollow">http://www.google.com/intl/de/about/datacenters/gallery/index.html#/</a></p>
