html - 在不影响 DOM 的情况下更改 div 大小

Question

我正在处理这个类似网格的用户列表，但我无法实现我的目标。我的目标是当您将鼠标悬停在用户的 div 上时，将显示有关他的信息。我希望 div 在不破坏 DOM 树的情况下增加其大小并与其他 div 重叠。

我希望你知道我的意思.. :)

Answer 1

这是一个想法：

您可以让每个项目都放在一个position: relativediv 中，然后当项目悬停或任何增长项目的事件时，给项目position: relative; left: 0; top: 0;并更改高度。

绝对位置会将其移出线并使其看起来仍然存在，因此其他 div 都不会移动。

Answer 2

您可以使用 jQuery 的.css()功能：

$(document).ready(function()
{
    $(".user").hover(function()
    {
        $(this).css({ "z-index": "9999" });
    }
});

Answer 3

只是使用z-index不会有帮助。但是将它与如下所示的布局相结合：

<div class="box">
    <div class="content">
        <!-- Your box content -->
    </div>
</div>

风格：

.box {浮动：左；位置：相对；溢出：可见；}

.content { 位置：绝对；}

重叠很重要，一行z-index比前一行高。