1

カードのスタックを表示しようとしていますが、それぞれの上部を表示し、ユーザーがカードの上にカーソルを置いて表示できるようにしたいと考えています。次の CSS がありますが、表示したいカードの数に関係なく、nth-child セクションをコピーする必要があります。私は現在 LESS や Style を使用していませんが、いずれかがこれを実行できる場合はオプションです。明確にするために、任意の数のカードで機能するソリューションを探しています。

.card_container > {
  position:relative;
  border:1px solid red;
}

.card_container > .card {
  position: absolute;
}

.card_container > .card:nth-child(1) {
  z-index:1;
  top:0px; 
}
.card_container > .card:nth-child(2) {
  z-index:2;
  top:35px; 
}
.card_container > .card:nth-child(3) {
  z-index:3;
  top:70px; 
}
.card_container > .card:hover {
  z-index: 9999;
}

javascript を使用してスタイルを割り当てようとしましたが、.card に直接割り当てられたスタイルが .card:hover よりも優先されます。

  $('.card').each(function(index, el) {
    var $el = $(el);
    $el.css('z-index', index);
    $el.css('top', (35*index)+'px');
  });
4

2 に答える 2

3

カードではなくコンテナで操作します。過度に直感的ではありませんが、非常にシンプルです。

.card_container li {
  height: 35px; 
  z-index: 0;   
  position: relative;    
}

.card{
  border: 1px solid black;
  width: 100px;
  height: 200px;  
  position: absolute;
}

.card_container li:hover {
  z-index: 9999;
}

ホバーされたカードは、Z インデックスにより、他のカードの上にオーバーフロー コンテンツとして表示されます。

于 2012-10-22T02:28:31.297 に答える
1

このフィドルはあなたに方向性を与えるかもしれません。基本的に、ul を互いに入れ子にして、それぞれの親に対して計算される位置を与えます。

HTML:

<ul>
    <li><div class="card"></div>
        <ul>
            <li><div class="card"></div>
                <ul>
                    <li><div class="card"></div></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>​

CSS:

ul ul{
 position:absolute;  
 top:10px;
 left: 10px;   
}
.card{
 background: red;
 border: 1px solid black;
 width: 100px;
 height: 200px;    
}​
于 2012-10-21T14:36:15.777 に答える