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

Question

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

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

Answer 1

您可以使用jQuery的.css()函数：

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

Answer 2

仅使用z-index无济于事。但是将它与看起来像这样的布局相结合：

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

风格：

.box {     向左飘浮;     位置：相对;     溢出：可见; }

.content {     位置：绝对的; }

要重叠，重要的是，一行的z-index比前一行高{。}。

Answer 3

这是一个想法：

您可以将每个项目放在position: relative div中，然后当项目悬停或任何增长项目的事件时，请提供项目position: relative; left: 0; top: 0;并更改高度。

绝对位置将把它从它的线上移开并使它看起来仍然存在，所以其他div都不会移动。