使用jQuery将div悬停/展开展开/收缩div [英] Expand / shrink div on hover / out with jQuery

问题描述

我正在寻找一个 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" });
})​

demo here

这篇关于使用jQuery将div悬停/展开展开/收缩div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！