Question

我有一系列包含图像和文字的卡片。我希望在用户将鼠标悬停在活动卡上时将信息附加到活动卡上。在悬停时，信息应叠加在下面的卡片上。

我尝试在悬停时将附加信息附加到活动卡并更改它的z-index，使其覆盖在其他卡上。但有些原因是有源卡将卡推入电流而不是叠加。

这是我创建的JSFiddle来说明问题。 https://jsfiddle.net/s9ou86a6/

我肯定没有正确地展示显示类型，但却无法解决问题。

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.card {
   width: 25%;
   background: #ddd;
   margin: 10px;
   min-height: 100px;
   z-index: 1;
}
.card: hover {
  z-index: 10;
  border: 1px solid #aaa;
}
.info {
  min-height: 100px;
}
.info:hover + .extrainfo {
  display: block;
  position: relative;
  z-index: 10;
}
.extrainfo {
  display: none;
}

感谢您查看帖子。帮助赞赏。

Answer 1

遵循以下结构：

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.card {
  width: 25%;
  background: #ddd;
  margin: 10px;
  min-height: 100px;
  z-index: 1;
}

.card: hover {
  z-index: 10;
  border: 1px solid #aaa;
}

.info {
  min-height: 100px;
  position: relative;
}

.extrainfo {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px;
  background: rgba(0, 0, 0, 0.5);
}

.info:hover .extrainfo {
  display: block;
  z-index: 10;
}

<div class="cards">
  <div class="card">
    <div class="info">
      Card Information
      <div class="extrainfo">
        Card Extra Information
      </div>
    </div>
  </div>
  <div class="card">
    <div class="info">
      Card Information
      <div class="extrainfo">
        Card Extra Information
      </div>
    </div>
  </div>
  <div class="card">
    <div class="info">
      Card Information
      <div class="extrainfo">
        Card Extra Information
      </div>
    </div>
  </div>
  <div class="card">
    <div class="info">
      Card Information
      <div class="extrainfo">
        Card Extra Information
      </div>
    </div>

  </div>
  <div class="card">
    <div class="info">
      Card Information
      <div class="extrainfo">
        Card Extra Information
      </div>
    </div>

  </div>
  <div class="card">
    <div class="info">
      Card Information
      <div class="extrainfo">
        Card Extra Information
      </div>
    </div>

  </div>
</div>

Answer 2

您可以position: absolute使用extrainfo课程，position: relative使用.card课程，这样额外的信息就会与卡片的最低位置对齐将bottom: 0;设置为extrainfo类。

.card {
   position: relative;
}
.extrainfo {
  display: none; 
  position: absolute;
  bottom: 0;
}

此处正在运作fiddle

Answer 3

进行此更改，它将结束。

.info {

最小高度：75px; }

and for info:hover make z-index: 15;

这是我刚刚做出的改变。 https://jsfiddle.net/TauseefJanjua/s9ou86a6/7/

Answer 4

我注意到了一些事情

1）确保：和悬停之间没有空格。

2）您不需要使用z-index。您可以使用绝对定位，然后使用顶部/底部/左/右将您的额外信息放在您希望出现的位置

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.card {
   width: 25%;
   background: #ddd;
   margin: 10px;
   min-height: 100px;
   position:relative;
}

.card:hover > .extrainfo{
  display:block;
}
.info {
  min-height: 100px;
}

.extrainfo {
  position:absolute;
  display: none;
}

请参阅随附的小提琴

https://jsfiddle.net/s9ou86a6/2/

我们成长时卡片覆盖移动其他卡片

4 个答案: