Javascript 使用jQuery的向上滑动转换将div中的内容替换为其他内容

我有两个div，如下所示：

<div id="content">
    Content 1
</div>
<div id="rollover-content" style="display: none;">
    Content 2
</div>

---

如何在一个div中完成这些转换，并将这个类包装在其中？

要实现这一点，您只需要将内容包装在几个div中。首先是一个与内容大小相同的外部div在其内部滑动，并具有

溢出：隐藏
以屏蔽其边界之外的内容。然后是另一个div，它容纳了所有的幻灯片，当你在里面和外面悬停时，可以上下移动。最后，你有了自己的实际内容。下面是一个例子：

<div class="container">
    <div class="slide">
        <div class="content" id="first">
            Content 1
        </div>
        <div class="content" id="second">
            Content 2
        </div>
    </div>
</div>

$（'.container'）。悬停（函数（e）{
var$container=$（此），
top=e.type=='mouseenter'？-$container.height（）：0；
$container.find（'.slide'）.stop（true）.设置动画({
顶端：顶端
})
})


或者，只要
.content
元素始终是CSS中定义的高度，您也可以单独在CSS中执行此操作：

.slide:hover {
    top: -150px;
}

您不需要任何jQuery来完成此操作。几行CSS已经可以实现这种效果。在
.box-2
上设置了一个转换来实现此效果


.box容器{
背景：蓝色；
宽度：200px；
高度：400px；
位置：相对位置；
溢出：隐藏；
}
.框-1{
位置：绝对位置；
背景：浅蓝色；
宽度：200px；
高度：400px；
排名：0；
左：0；
}
.方框-2{
位置：绝对位置；
背景：深蓝色；
颜色：白色；
宽度：200px；
身高：0；
底部：0；
左：0；
过渡：高度。4s容易进出；
}
.box容器：悬停.box-2{
高度：400px；
}

你好
新内容
$（'#content'）.on（'mouseenter mouseleave'，function（）{$（'#rollover content'）.slideToggle（）}）
为什么要使用JavaScript？感谢您提供了这些优秀的示例。是我，还是jQuery的转换比css平滑得多。它会随着机器和浏览器的不同而变化。一般来说，CSS转换会更平滑，因为它们是硬件加速的，而JS动画则不是。我将把这标记为答案，但是你是否可以看看我的帖子“卡片”底部的CSS类？我想让我的方块看起来像那样，我现在遇到的麻烦比我想象中的要多。把它应用到你给我的东西上。@Rorymcrossan你能看看我的JSFIDLE吗？应该是3张并列的卡片。如果将鼠标悬停在图像上，它将显示描述；如果将鼠标移出，它将再次显示图片。我似乎无法将您的css唯一示例应用于它。请注意，这与演示页面中显示的OP的行为并不完全相同，尽管作为css唯一的解决方案，它非常好。您能告诉我如何将其与类似于此的卡合并吗？
.slide:hover {
    top: -150px;
}