Javascript 如何用文章覆盖div，直到鼠标悬停显示div

我想在一篇文章上有一个漂亮的滑动动画来显示一个div，在鼠标悬停时有更多的信息。一个非常相似的例子是，当你点击右上角的“ShowModern Dev广告”时

这是我的代码：

<style>

.download:hover {
margin-left:10%;
margin-right:40%;
background-color:#DDD;
}

.download {
margin:50px 25%;
height:360px;
background-color:#FFF;
}

.download:hover > div {
visibility:visible;
margin:50px 25%;
height:360px;
position:absolute;
}

.download > div {
background-color:white;
visibility:hidden; /*Only for editing purposes*/
}

</style>

下载：悬停{
左边距：10%；
右边距：40%；
背景色：#DDD；
}
.下载{
利润率：50px25%；
高度：360px；
背景色：#FFF；
}
下载：hover>div{
能见度：可见；
利润率：50px25%；
高度：360px；
位置：绝对位置；
}
.download>div{
背景色：白色；
可见性：隐藏；/*仅用于编辑目的*/
}

庞阿尔法

很有趣

$（文档）.ready（函数（）{
$（“#翻转”）.hover（函数（）{
$（“面板”）。向下滑动（“慢速”）；
});
});

我想这就是你在寻找的

请尝试以下示例：

---

或者在你的例子中使用mouseover mouseout

或者你可以像这样做

.mouseenter（）

和

.mouseleave（）

，这可能更符合你的需要。。。这这样，当您将鼠标从原始面板或向下滑动面板中移出时，面板将关闭（这样用户可以单击向下滑动面板上的某个对象）。

<section>

    <article class="download">
        <h2>Pong Alpha</h2>

        <div>
            <ul>
                <li>It's fun</li>
            </ul>
        </div>

    </article>

</section>

<script> 
$(document).ready(function(){
  $("#flip").hover(function(){
    $("#panel").slideDown("slow");
  });
});
</script>