javascript - 希望在 blur div 上构建悬停/契约(Contract)扩展

Question

大家好，我已经在搜索引擎上苦苦思索了几个小时，我想我不妨问问...

我需要构建一个 div，它在模糊时是一个尺寸，比如 300x30，在悬停时扩展到 300x300 并将其下方的所有内容向下推，并在模糊时恢复到 300x30 尺寸(“不再悬停”或任何你 children 现在又把它称为大声笑)。有人可以给我指出一些资源，甚至可以给我一些代码位来玩吗？将不胜感激!

Answer 1

如果您不需要动画，您可以在 CSS 中使用伪类。

div.div {
   height: 30px;
   width: 300px;
   border: 1px solid black;
}

div.div:hover {
   height: 300px;
}​

实例

http://jsfiddle.net/aFUmS/

$('.div').hover(function() {
    $(this).animate({
        height: '300px'
    }, 300);
},function() {
    $(this).animate({
        height: '30px'
    }, 300);
});​

jQuery 例子如果你想要动画

http://jsfiddle.net/CvhkM/