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>

Answer 2

尝试这样的事情

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

<style>
.profile-image{
 position: relative;}
.profile-image img {
  width: 48px;
  height: 48px;
 border-radius: 500px;
 display: block;
}
.image_hover_bg{
background: url("images/zoom_icon.png") no-repeat scroll center center rgba(0, 0, 0, 0);
height: 171px;
position: absolute;
top: 0;
width: 210px;
z-index: -1;
display:none;
}
.profile-image:hover .image_hover_bg{display:block}
</style>

Answer 3

自己动手。

HTML：

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

CSS补充道：

.profile-image:hover .overlay {
  position:absolute;
  width: 48px;
  height: 48px;
  z-index: 100;
  background: transparent url('overlay_image.png') no-repeat;
  cursor: pointer;
}

Answer 4

我自己想在悬停的另一张图片的中心显示一张图片

HTML：

<html>
  <head>
    <link rel="stylesheet" href="index.css">
  </head>

  <div class="imageBox">

    <div class="imageInn">
      <img src="background.jpg" alt="Profile Image">
    </div>

    <div class="hoverImg center">
    <img src="sign-check-icon.png" alt="default image">
    </div>

  </div>
</html>

CSS：

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

.imageBox .hoverImg {
  position: absolute;
  left: 350px;
  top: 100px;
  display: none;

}

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

请注意，在我的情况下，背景图片为700x200（宽x高）时，left: 350px和top: 100px会根据您的背景图片进行更改。因此，为了将图像定位到中心，只需要宽度和高度的一半即可。

在悬停时在另一个图像上显示图像

4 个答案: