Question

我正在尝试展示一堆卡片，我希望每个卡片的顶部显示并允许用户将鼠标悬停在卡片上以显示它。我有以下CSS，但对于我要显示的任意数量的卡，我必须复制我的n-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');
  });

Answer 1

在容器而不是卡片上操作。不是过于直观而是非常简单。

.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，悬停的卡片会在其他卡片上显示为溢出的内容。

Answer 2

This小提琴可能会给你指路。基本上你将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;    
}

如何创建一堆偏移并相互重叠的图像？

2 个答案: