使用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

Answer 2

还有一种方法可以做到。

$("#DivMain").hover(
    function(){
        $(".DivSub").show();
    },
    function(){
        $(".DivSub").hide();
    }
);