javascript - 将鼠标悬停在效果上将图像向下推

Question

这是 media div 的图像，我有 on hover X:

这是您单击 div 并上传照片时的图像。如您所见，它非常适合放在盒子里。

当我将鼠标悬停在图像上以查看X 时，最后这里是一个 div。

如您所见，图像被向下推了。 我的最终结果是让它悬停在图像上而不影响图像放置

这是我的 CSS:

.x {
  color:red;
  #width:50px;
  #height:50px;
  display:none;
  #left:50px;
}
.MediaPreview:hover > .x {
  display:block;
}
.MediaPreview {
    position: absolute;
    width: 128px;
    height: 72px;
    background-color: #e0e0e0;
    cursor: default;
}

这是我的 HTML:

<div class="MediaPreview" style="left: 10px; bottom: 10px;">
  <span>Image or video, required</span>
   <div class="x">x</div>
</div>

Answer 1

试试这个？

.x {
  color:red;
  #width:50px;
  #height:50px;
  display:none;

  top: 10px;
  left: 10px;
  position: absolute;
  z-index: 1;

}
.MediaPreview:hover > .x {
  display:block;
}
.MediaPreview {
    position: absolute;
    width: 128px;
    height: 72px;
    background-color: #e0e0e0;
    cursor: default;
}