希望在blur div上构建一个展开悬停/合同 [英] Looking to build an expand on hover/contract on blur div

问题描述

我一直在搜索引擎的墙壁上殴打我的头几个小时，我想我可能会问......需要建立一个模糊的单一尺寸的div，例如300x30，在悬停时展开为300x300，并将所有内容压缩到下面，并在模糊时回复到300x30的尺寸（不再徘徊或任何您孩子称之为的尺寸现在一天大声笑）再次。有人能指点我一些资源，甚至可以给我一些代码位来玩吗？这将是非常感谢！

解决方案

如果您不需要动画，您可以在CSS中使用Psuedo类。 / p>

  div.div {
 height：30px; 
 width：300px; 
 border：1px纯黑色; 
} 
 
 div.div：hover {
 height：300px; 
 
 
 
 
 
 
实例
 
 
 
  http://jsfiddle.net/aFUmS/  
 
 
 （$。$ div $）。$（$。$ div $）。 b），300）; 
}，function（）{
 $（this）.animate（{
 height：'30px'
}，300）; 
 }）; 
  

jQuery示例如果您需要动画

http://jsfiddle.net/CvhkM/

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!

解决方案

You can use Psuedo-classes in CSS if you don't want an animation.

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

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

Live Example

http://jsfiddle.net/aFUmS/

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

jQuery example if you want animation

http://jsfiddle.net/CvhkM/

这篇关于希望在blur div上构建一个展开悬停/合同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！