html - 悬停时在另一张图片上显示图片

Question

我有以下代码:JSFiddle

HTML:

<div class="profile-image">
  <a href="#"><img src="image.png" /></a>
</div>

CSS:

.profile-image img {
  width: 48px;
  height: 48px;
  position: absolute;
  left: 12px;
  top: 12px;
  border-radius: 500px;
  display: block;
}

HTML 中的图片标签必须存在。

我怎样才能做到当您将鼠标悬停在图片标签中的图片上时，它会在其上方显示另一张图片？

Answer 1

您可以在悬停父 div 时显示另一个 div。

.imageBox:hover .hoverImg {
    display: block;
}

.imageBox {
  position: relative;
  float: left;
}

.imageBox .hoverImg {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

.imageBox:hover .hoverImg {
  display: block;
}

<div class="imageBox">
  <div class="imageInn">
    <img src="http://3.bp.blogspot.com/_X62nO_2U7lI/TLXWTYY4jJI/AAAAAAAAAOA/ZATU2XJEedI/s1600/profile-empty-head.gif" alt="Default Image">
  </div>
  <div class="hoverImg">
    <img src="https://lh5.googleusercontent.com/-gRq6iatuNYA/AAAAAAAAAAI/AAAAAAAAANk/674knqRN1KI/photo.jpg" alt="Profile Image">
  </div>
</div>