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 に答える