使用 jQuery 在悬停/退出时展开/缩小 div

Expand / shrink div on hover / out with jQuery(使用 jQuery 在悬停/退出时展开/缩小 div)

问题描述

我正在寻找一个 jQuery 插件来扩展 div 元素，以便在悬停时显示它们的溢出(如果有的话).插图:

I am looking for a jQuery plugin to expand div elements so as to reveal their overflow (if any) on hover. Illustration:

插件应该在相对定位的 div 上工作(我猜这意味着您创建 div 的副本，将其定位设置为绝对，然后弄清楚放在哪里).

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).

是否已经有这样的插件可用?

推荐答案

你不需要插件.只需添加适当的 css 并使用 jQuery animate:

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！