希望在模糊 div 上建立悬停/合同扩展 [英] Looking to build an expand on hover/contract on blur div

问题描述

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/

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