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

Here is an image of the media div with the on hover X I have:

这是一个媒体div的图像与悬停X我有:

Here is an image of when you click on the div and upload a photo. As you can see it fits nicely inside the box.

这是当您点击div并上传照片时的图像。如你所见,它非常适合盒子内部。

Finally here is a div when I hover over the image to see the X.

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

As you can see the image got pushed down. My end result is instead to have it hover over the image and not affect the images placement

如你所见,图像被推倒了。我的最终结果是将其悬停在图像上而不影响图像放置

Here's my CSS:

这是我的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;
}

Here is my HTML:

这是我的HTML:

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

4 个解决方案

#1

Try this?

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

#2

You need to apply position:absolute to .x, not .MediaPreview. Try this:

您需要将position:absolute应用于.x,而不是.MediaPreview。试试这个:

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

#3

This is how to get the job done. Using pure css

这是如何完成工作。使用纯css

<div class="mediapreview">

<a href="#" class="upsize red">X</a>

<img src="http://hub.n2growth.com/wp-content/uploads/2012/04/About-People-2.jpg" alt="people" class="responsive">

</div>

DEMO

#4

you can try this: https://jsfiddle.net/maky/gqn1nrxj/

你可以尝试这个: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;
}

#1