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。マウスは、存在しない要素にカーソルを合わせることができません。

それらを表示し、子要素を非表示/表示する必要があります。

デモ

Answer 2

そしてそれを行うもう1つの方法。

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