javascript - 在 div 上创建淡出效果

Question

我在创建这个时遇到了麻烦。

我使用 jQuery 作为我的主要 JS 库。我想使用 fade() 函数创建一个 div，当鼠标悬停时，它会淡出以显示下面的内容。

例如，一个带有灰色背景的 div，顶部有一个图像，该图像会淡出以显示下面的内容。这可能吗？我不太擅长 JS/jQuery

Answer 1

类似这样的http://jsfiddle.net/dkpgQ/2/ ？

编辑:代码...

HTML

<div id="container">
    <div id="content">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
    </div>
    <div id="overlay">
    </div>
</div>

Javascript

$("#overlay").mouseover(function() {
   $("#overlay").fadeOut("slow"); 
});

CSS

#container {
    position:relative;
    width:200px;
}

#overlay {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:grey;
}