Question

我试图在我得到的一些图像上添加一些悬停效果。

<div id="horizontal_list">
  <div class="grid_3 first overlay">
      <a href="#">
        <img border="0" alt="first" src="path">
      </a>
  </div>
  <div class="grid_3 overlay">
      <a href="#">
        <img border="0" alt="first" src="path">
      </a>
  </div>
</div>

当我使用叠加层悬停div时，我希望将另一张图像悬停在图片标签的顶部..

我有以下css：

#horizontal_list{
margin-top: 18px;
height: 330px;
}

.grid_3{
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}   
.first{
        margin-left: 0px !important;
    }

.last{
    margin-right: 0px !important;
}

.overlay{
    height: 330px;
}

.overlay:hover{
    background: url('path') no-repeat;
}

Answer 1

我不确定'imagetag'是什么意思，但这就是我的意思：

你可以做的是在你的html中添加第二张图片：

<div id="horizontal_list">
  <div class="grid_3 first overlay">
      <a href="#">
        <img class="first_img" border="0" alt="first" src="path">
        <img class="sec_img" border="0" alt="second" src="path">
      </a>
  </div>
  <div class="grid_3 overlay">
      <a href="#">
        <img class="first_img" border="0" alt="first" src="path">
        <img class="sec_img" border="0" alt="second" src="path">
      </a>
  </div>
</div>

在你的CSS中：

.overlay {position: relative;}
.overlay:hover a img.sec_img {display: none;}
.overlay:hover a img.sec_img {
  display: block;
  position: absolute;
  background: url(path) no-repeat;
  top: 0;
  left: 0;
  width: [imgwidth]px;
  height: [imgheight]px;
}

务必将[imgwidth]和[imgheight]更改为正确的尺寸。

Answer 2

HTML

 <div class="hoverholder">
      <a href="#" class="picone">
        <img src="#" alt="" />
      </a>
      <a href="#" class="pictwo">
        <img src="#" alt="" />
      </a>
    </div>

CSS

.pictwo {display:none;}

.hoverholder:hover .picone{
  display:none;
}

.hoverholder:hover .pictwo{
  display:block;
}

将图像悬停在另一个图像的顶部

2 个答案: