我正在处理这个类似网格的用户列表,但我无法实现我的目标。我的目标是当您将鼠标悬停在用户的 div 上时,将显示有关他的信息。我希望 div 在不破坏 DOM 树的情况下增加其大小并与其他 div 重叠。
我希望你知道我的意思.. :)
这是一个想法:
您可以让每个项目都放在一个position: relative
div 中,然后当项目悬停或任何增长项目的事件时,给项目position: relative; left: 0; top: 0;
并更改高度。
绝对位置会将其移出线并使其看起来仍然存在,因此其他 div 都不会移动。
您可以使用 jQuery 的.css()
功能:
$(document).ready(function()
{
$(".user").hover(function()
{
$(this).css({ "z-index": "9999" });
}
});
只是使用z-index
不会有帮助。但是将它与如下所示的布局相结合:
<div class="box">
<div class="content">
<!-- Your box content -->
</div>
</div>
风格:
.box {浮动:左;位置:相对;溢出:可见;}
.content { 位置:绝对;}
重叠很重要,一行z-index
比前一行高。