1

我试图展示一堆卡片，我希望每张卡片的顶部都显示出来，并允许用户将鼠标悬停在卡片上以显示它。我有以下 CSS，但是对于我想要显示的任意数量的卡片，我必须复制我的第 n 个子部分。我目前没有使用 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-index，悬停的卡片将在其他卡片之上显示为溢出的内容。

于 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 回答