在鼠标悬停时展开 div。（向左侧或右侧扩展）

【问题标题】：Expanding a div on mouseover. (expands to the left or the right side)在鼠标悬停时展开 div。（向左侧或右侧扩展）
【发布时间】：2011-10-13 05:39:24
【问题描述】：

这是对以下内容的跟进：

我想在悬停状态下添加更多内容。说“正常”（w：100px，h：100px）有一个 50px（w/h）的图像，其下方有一个小的居中标题。 'Hover' (w:300px, h:100px) 与'Normal' 相同，但它既可以在图像和标题的左侧展开，也可以在右侧展开，另一侧有更多内容。

我该怎么做呢？

哈雷

【问题讨论】：

【解决方案1】：

试试这个：

.myDiv .hoverContent {
    display: none;
}
.myDiv:hover .hoverContent {
    display: block;
}
.myDiv:hover img {
    float: left;
}

【讨论】：

我正在通过 .js 执行此操作，jsfiddle.net/harmeister/a4n6e/18 这是我目前所得到的。我很难弄清楚我哪里出错了，当你看到它时，你就会知道我在说什么。
@Harley - 是的，使用 JavaScript 制作动画。不过，您仍然可以使用纯 CSS 来显示和隐藏内容：jsfiddle.net/gilly3/a4n6e/33
感谢您的帮助。我很困惑。非常感谢。
也想表达我的感谢。我的布局比你在这里摆弄的要复杂一些，但这基本上是我需要做的事情的主要本质。它做得非常干净。谢谢。