在悬停时在另一个图像上显示图像 [英] Show image over another image on hover

问题描述

我有以下代码: 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 中的图像标签 必须存在.

The image tag in the HTML must be there.

我该如何做，以便当您将鼠标悬停在图像标签中的图像上时，它会在其上方显示另一个图像?

How can I make it so that when you hover over the image in the image tags, it shows another image over top of it?

推荐答案

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

You can show another div on hover of parent 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>

这篇关于在悬停时在另一个图像上显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！