使用 CSS 和 HTML 创建滑出式面板

Question

我正在寻找为网站构建主页。我希望主页有 4 或 5 个矩形，一个接一个，位于页面中心。这些矩形中的每一个都将在其中包含一个图像（左侧）和一些文本（右侧）。

当用户将鼠标悬停在每个矩形上时，我希望它在页面上垂直向下延伸 4-500 像素（保持其水平长度），并让矩形下方的矩形被鼠标悬停，也向下移动页面（以容纳扩展的“抽屉”）。当鼠标从“抽屉”中取出时，“抽屉”缩回形成原来的矩形，其他矩形回到原来的位置。

“抽屉”的内容将是文本和图像，原始矩形保持静止并充当“抽屉”的标题或标题。我的问题是：我将如何完成让每个矩形展开的任务，让其他矩形同时移动，然后在鼠标移开时收回。

我猜这将通过 CSS 转换的东西来完成（也许还有一些花哨的 HTML5 的东西？），但这就是我对 CSS 的了解结束的地方。我意识到这是一个相当大且复杂的问题，因此非常感谢任何帮助。

非常感谢。

Answer 1

您可以在 :hover 伪类上使用 CSS3 过渡 ^{W3C specs、MDN Docs}..

演示地址 http://jsfiddle.net/gaby/mX7qN/

Answer 2

您正在寻找类似于所谓的手风琴菜单的东西。它们确实可以通过 CSS3 transition 属性来完成。没有特别需要 HTML5 功能。有关示例，请参阅here。该示例中的一个小区别是，当您将鼠标悬停时，第一个菜单项保持展开状态，而您似乎想要折叠它。但是稍微调整一下这个例子，我认为你应该有你需要的。