Question

我希望在文章上有一个很好的滑动动画，以便在鼠标悬停时显示包含更多信息的div。当您点击右上角的“显示现代开发广告”时，来自http://javascriptissexy.com/的非常相似的示例

这是我的代码：

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

<section>

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

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

    </article>

</section>

Answer 1

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

我认为这就是你在寻找的东西。

请尝试以下示例：jsfiddle

或者在您的示例中使用mouseover mouseout。 jsfiddle

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

1 个答案: