在div上悬停时显示div

Question

我想在悬停时显示div。我已经尝试了很多，但无法解决我的问题。当我将鼠标悬停在div时出现img_overlay，但在悬停时它会上升。

＆＃13;

＆＃13;

.main_image_div {
  margin: 0 auto;
  display: flex;
  display: -webkit-flex;
  width: 100px;
  height: 100px;
}

.main_image_div .image_div {
  margin: auto;
}

.main_image_div .image_div img {
  width: 100%;
}

.main_image_div .image_div .img_overlay {
  top: -100px;
  bottom: 0;
  right: 0;
  left: 0;
  display: none;
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  width: 100px;
  height: 100px;
}

.main_image_div .image_div .img_overlay p {
  position: absolute;
  top: 20px;
  left: 25px;
  color: #FFFFFF;
  font-size: 14px;
}

.main_image_div .image_div .img_overlay p+p {
  top: 50px;
}

.main_image_div:hover .img_overlay {
  display: block;
}

＆＃13;

<div class="main_image_div b">
  <div class="image_div">
    <img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg">
    <div class="img_overlay">
      <p>Change</p>
      <p>Delete</p>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

任何帮助都会很棒。

谢谢。

Answer 1

在父元素上添加position:relative，在覆盖图上添加position:absolute

＆＃13;

＆＃13;

.main_image_div {
  margin: 0 auto;
  display: flex;
  display: -webkit-flex;
  width: 100px;
  height: 100px;
  position: relative;
}

.main_image_div .image_div {
  margin: auto;
}

.main_image_div .image_div img {
  width: 100%;
}

.main_image_div .image_div .img_overlay {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: none;
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  width: 100px;
  height: 100px;
}

.main_image_div .image_div .img_overlay p {
  position: absolute;
  top: 20px;
  left: 25px;
  color: #FFFFFF;
  font-size: 14px;
}

.main_image_div .image_div .img_overlay p+p {
  top: 50px;
}

.main_image_div:hover .img_overlay {
  display: block;
}

＆＃13;

<div class="main_image_div b">
  <div class="image_div">
    <img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg">
    <div class="img_overlay">
      <p>Change</p>
      <p>Delete</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是工作代码。我知道它需要更多的造型。我使用position:absolute和position:relative。悬停覆盖了div的100％。这是你想要的吗？

＆＃13;

＆＃13;

.main_image_div {
  margin: 0 auto;
  display: flex;
  display: -webkit-flex;
  width: 100px;
  height: 100px;
}
.main_image_div .image_div {
  margin: auto;
  position: relative;
}
.main_image_div .image_div img {
  width: 100%;
}
.main_image_div .image_div .img_overlay {
    display: none;
    top: 0;
    left: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
}
.main_image_div .image_div .img_overlay p {
  position: absolute;
  top: 20px;
  left: 25px;
  color: #FFFFFF;
  font-size: 14px;
}
.main_image_div .image_div .img_overlay p + p {
  top: 50px;
}
.main_image_div:hover .img_overlay {
  display: block;
}

＆＃13;

<div class="main_image_div b">
										<div class="image_div">
											<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" >
											<div class="img_overlay">
												<p>Change</p>
												<p>Delete</p>
											</div>
										</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

当你需要做出的唯一更改100px 100% height时，每个人都会过分提出建议。

.main_image_div .image_div .img_overlay {
    height:100%;
}

通过这样做，你不会弹出任何灰色框。

Answer 4

这不是最佳方法，但如果您需要快速修复，请更改以下内容

.main_image_div .image_div {
    position: relative;
}

.main_image_div .image_div .img_overlay {
    top: -16px;
    position: absolute;
}

Answer 5

试试这个：

＆＃13;

＆＃13;

.main_image_div {
  margin: 0 auto;
  display: flex;
  display: -webkit-flex;
  width: 100px;
  height: 100px;
}

.main_image_div .image_div {
  margin: auto;
}

.main_image_div .image_div img {
  width: 100%;
}

.image_div {
  position: relative;
  overflow: hidden;
}

.img_overlay {
  position: absolute;
  height: 100%;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  color: #ffffff;
  padding: 0;
}

.main_image_div:hover .img_overlay {
  top: 0;
  padding: 5px;
}

＆＃13;

<div class="main_image_div b">
  
  <div class="image_div">
    <img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" >
    
    <div class="img_overlay">
		  <p>Change</p>
      <p>Delete</p>
    </div>
  
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;