4

我有以下代码：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 中的图像标记必须存在。

我怎样才能做到这一点，当您将鼠标悬停在图像标签中的图像上时，它会在其顶部显示另一个图像？

4

4 回答 4

11

您可以在父 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>

于 2013-10-01T05:31:53.917 回答
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;
}
于 2013-10-01T04:57:46.810 回答
3

尝试这样的事情

<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>
于 2013-10-01T04:47:33.903 回答
1

我自己得到了在悬停时在另一个图像的中心显示图像

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

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

于 2019-12-26T18:40:18.303 回答