html - DOM に影響を与えずに div サイズを変更する

Question

このグリッドのようなユーザーリストに取り組んでいますが、目標を達成するのに苦労しています。私の目標は、ユーザーの div にカーソルを合わせると、そのユーザーに関する情報が表示されることです。DOM ツリーを壊さずに、div のサイズを大きくして他の div とオーバーラップさせたい。

私が何を意味するか知っていることを願っています.. :)

ここに画像の説明を入力

score 0 · Accepted Answer

jQueryの.css()関数を使用できます：

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

score 0 · Accepted Answer

を使用するだけでz-indexは役に立ちません。しかし、それを次のようなレイアウトと組み合わせます。

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

スタイル：

.box { float: 左; 位置:相対; オーバーフロー:可視; }

.content { 位置:絶対; }

オーバーラップするには、行が前の行よりも高いことが重要ですz-index。

score 0 · Accepted Answer

ここにアイデアがあります：

各アイテムをposition: relativediv に配置し、アイテムがホバーされたとき、またはアイテムを成長させるイベントが発生したときに、アイテムを指定しposition: relative; left: 0; top: 0;て高さを変更できます。

絶対位置はそれをその行から外し、まだそこにあるように見せるので、他の div は移動しません。

3 に答える 3