javascript 希望在模糊 div 上建立悬停/收缩的扩展
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3755381/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Looking to build an expand on hover/contract on blur div
提问by 86Stang
Hey all, I've been beating my head against the search engine walls for a couple hours now and figure I might as well just ask...
大家好，我已经用头撞在搜索引擎的墙上几个小时了，我想我不妨问问......
I need to build a div that is one size on blur, say 300x30, that expands to 300x300 on hover and pushes all content below it down and will revert to the 300x30 size when blurred ("no longer hovered" or whatever you kids are calling it now-a-days lol) again. Can someone point me to some resources or even give me some code bits to play with? It'd be much appreciated!
我需要建立一个模糊大小的 div，比如 300x30，在悬停时扩展到 300x300 并将其下方的所有内容向下推，并在模糊时恢复到 300x30 大小（“不再悬停”或任何你孩子打电话的现在又是一天，哈哈）。有人可以指出我一些资源，甚至可以给我一些代码位来玩吗？将不胜感激！
回答by Robert
You can use Psuedo-classes in CSS if you don't want an animation.
如果您不想要动画，可以在 CSS 中使用伪类。
div.div {
height: 30px;
width: 300px;
border: 1px solid black;
}
div.div:hover {
height: 300px;
}?
Live Example
现场示例
$('.div').hover(function() {
$(this).animate({
height: '300px'
}, 300);
},function() {
$(this).animate({
height: '30px'
}, 300);
});?
jQuery example if you want animation
jQuery 示例，如果你想要动画
回答by Asbj?rn
Or you can add a .stop()before the .animateand the animation will stop immediately after you remove the pointer.
或者您可以在.stop()之前添加，.animate并且在您移除指针后动画将立即停止。
$('.div').hover(function() {
$(this).stop().animate({
height: '300px'
}, 300);
},function() {
$(this).stop().animate({
height: '30px'
}, 300);
});
回答by Ryan Lindsey
If you add a transition to Robert's answer, it's CSS-only, and you get animation, too:
如果您向 Robert 的答案添加过渡，则它仅是 CSS，并且您也可以获得动画：
Add this to the div (not the div:hover):
transition: height 0.5s ease-in;
将此添加到 div（不是 div:hover）：
transition: height 0.5s ease-in;
I just implemented this on a site, and it even works well for mobile. The div does have to be a static height when collapsed and expanded, though.
我刚刚在一个网站上实现了这个，它甚至适用于移动设备。但是，当折叠和展开时，div 必须是静态高度。
