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

还有另一种方法。

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