悬停时，DIV 扩展并与其他对象重叠

Posted 2023-05-08

【中文标题】悬停时，DIV 扩展并与其他对象重叠

【英文标题】：On hover, DIV expands and overlaps others

【发布时间】：2012-05-02 14:47:24

【问题描述】：

我想做一些非常简单的事情。我有许多按网格排列的 DIV 框。当我悬停其中一个时，我希望它慢慢膨胀，从中间锚定，然后向下收缩。但是，如果不将其他 DIV 框推到一边，我就无法这样做。我希望悬停的 DIV 缓慢扩展，与其他 DIV 框重叠，而不移动它们。 我已经用 JQuery 完成了其中的一些。 这是我所拥有的：

CSS：

divwidth: 100px; height: 100px; float: left;
div#sq1background-color: magenta;
div#sq2background-color: yellow;
div#sq3background-color: cyan;

JQuery:

<script type='text/javascript' src='animated.js'></script>
<script type="text/javascript">
$(document).ready(function() 
    $("div").hover(function()
        if (!$(this).hasClass('animated')) 
            $(this).dequeue().stop().animate( width: "100px", height: "100px" );
    
    , function() 
        $(this).addClass('animated').animate( width: "200px", height: "200px" , "normal", "linear", function() 
        $(this).removeClass('animated').dequeue();
    );
);
</script>

html：

<div id="dequeue" class="blocks">
<div id="sq1"></div>
<div id="sq2"></div>
<div id="sq3"></div>
</div>

这是我想要的样子： 之前：http://i39.tinypic.com/dh9x87.png 之后：http://i44.tinypic.com/70cd35.png

谢谢！

【问题讨论】：

我在图片中看到九个框，在您发布的标记中看到三个框。这让我很困惑:)

【参考方案1】：

尝试使用负边距来诱使页面认为每个框仍然是 100 像素 x 100 像素。因此，除了将宽度和高度从 100px 设置为 200px 之外，还可以将边距设置为 从 0 到 -50px。

希望这会有所帮助:)

编辑

这是一个工作示例：

http://jsfiddle.net/sGDvj/1/

【参考方案2】：

我想我理解你想要做什么 :D 虽然我没有 100% 肯定的答案，但我有一个建议，尝试使用 div 的 z-index，也许让你成为悬停在 5 或任何你想要的正数上！

【参考方案3】：

为什么不使用绝对位置？或者另一种方法是在悬停的 div 上创建一个重复的 div 并为其设置动画。

【参考方案4】：

只需简单易用的CSS3即可

http://jsfiddle.net/mhkfH/

【讨论】：

太好了，谢谢！这是一个工作示例：jsfiddle.net/4uvfZ（注意对第一个选择器的更改）

【参考方案5】：

看看这个http://jsfiddle.net/tdsNF/2/ 并查看Expand / shrink div on hover / out with jQuery 的学分。

【参考方案6】：

看看这个例子；我认为这就是你想要做的。 http://jsfiddle.net/tdsNF/2/

它是一个带有图像的扩展器，但我相信 div 也可以。

在这里找到它：Expand / shrink div on hover / out with jQuery

var $imageWidth     = 92,    // with borders
$imageColumns    = 10;    // images across

$("#container > div .img").each(function(index) 
var $left = (index % $imageColumns * $imageWidth);
$(this).css("left", $left + "px");
);

$(".img a img").hover(function() 
    $(this).closest(".img").css("z-index", 1);
    $(this).stop(true,true).animate( height: "200", width: "200", left: "-=55", top: "-=55" , "fast");
    $("#name").css("color", "#242424").html($(this).attr("data-name"));
    $("#school").css("color", "#242424").html($(this).attr("data-school"));
, function() 
$(this).closest(".img").css("z-index", 0);
$(this).stop(true,true).animate( height: "90", width: "90", left: "+=55", top: "+=55"     , "fast");
);​

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

我想我的 SO 礼仪还是有点粗俗。感谢您的提示，很高兴知道。