Question

On a page there are multiple elements like this

<h1 class="bodyText hide">1</h1>
<h1 class="bodyText hide">2</h1>
<h1 class="bodyText hide">3</h1>

and

.hide{
    display:none;
}

.bodyText {

}

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

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

$('.bodyText').on('mouseout', function(event){
    $(this).fadeOut();
});

This does absolutely nothing. Any ideas how to do this?

I want to achieve this kind of effect: http://www.google.com/intl/de/about/datacenters/gallery/index.html#/

Answer 1

Since your <h1> elements are hidden they can’t trigger the mouseover event – your mouse can’t hover an element that is not present.

You should have them visible and hide/show a child element.

DEMO