使用jQuery将div悬停/展开展开/收缩div [英] Expand / shrink div on hover / out with jQuery
本文介绍了使用jQuery将div悬停/展开展开/收缩div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找一个 jQuery
插件来展开 div
元素以显示它们的溢出(如果有的话)悬停。插图:
这个插件应该在相对定位的 div
的位置工作(我想这意味着你创建了一个 div
,将它的位置设置为绝对值,然后找出它的位置)。
是否有这样一个插件已经可用?
解决方案
您不需要插件。
只需添加合适的CSS并使用jQuery动画:
$ div
.on('mouseenter',函数(){
$(this).animate({margin:-10,width:+ = 20,height:+ = 20});
})
。 on('mouseleave',function(){
$(this).animate({margin:0,width: - = 20,height: - = 20});
})
I am looking for a jQuery
plugin to expand div
elements so as to reveal their overflow (if any) on hover. Illustration:
The plugin should work on relatively positioned div
's (which I guess implies that you create a copy of the div
, set its positioning to absolute, then figure out where to place it).
Is there such a plugin already available out there?
解决方案
You don't need a plugin. Just add proper css and use jQuery animate:
$div
.on('mouseenter', function(){
$(this).animate({ margin: -10, width: "+=20", height: "+=20" });
})
.on('mouseleave', function(){
$(this).animate({ margin: 0, width: "-=20", height: "-=20" });
})
这篇关于使用jQuery将div悬停/展开展开/收缩div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文