jquery - 使用 jquery 在鼠标悬停/移出时隐藏/显示元素

Question

一个页面上有多个这样的元素

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

和

.hide{
    display:none;
}

.bodyText {

}

现在，当鼠标进入 bodyText 元素时，当鼠标离开该元素时，文本应该淡入和淡出。我尝试过的:

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

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

这绝对没有任何作用。有什么想法如何做到这一点？

我想达到这样的效果:http://www.google.com/intl/de/about/datacenters/gallery/index.html#/

Answer 1

自从您的 <h1>元素被隐藏，它们无法触发 mouseover事件 - 您的鼠标无法悬停在不存在的元素上。

您应该让它们可见并隐藏/显示子元素。

DEMO