将鼠标悬停在推动图像向下的效果上

Question

以下是我media div的{​​{1}}的图片：

以下是点击div并上传照片的图片。正如你所看到的，它非常适合盒子内部。

最后，当on hover X图片看到hover over时，这是一个div。

正如您所看到的，图像被推倒了。 我的最终结果是将鼠标悬停在图片上而不影响图片放置

这是我的CSS：

X

这是我的HTML：

.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;
}

Answer 1

试试这个？

action='store_true'

Answer 2

您需要将form > info > div > div > label应用于position:absolute，而不是.x。试试这个：

.MediaPreview

Answer 3

你可以试试这个： https://jsfiddle.net/maky/gqn1nrxj/

.x {
  color:red;
  display:none;
  position: absolute;
  top: 0;
  left: 0;
}
.MediaPreview:hover > .x {
  display:block;
}
.MediaPreview {
    position: relative;
    padding:10px;
    width: 200px;
    height: 200px;
    background-color: #e0e0e0;
    cursor: default;
}