将图像悬停在另一张图像上

我正试图在一些图像上添加一些悬停效果。将图像悬停在另一张图像上

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

当我徘徊与覆盖类我想另一个图像悬停在imagetag顶部的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; 
}

来源

2012-03-31 ffffff01

我m不确定你的意思是'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]到正确的尺寸。

来源

2012-03-31 16:14:23

嗯..我还是要显示的原始图像。第二图像是透明覆盖.. – ffffff01 2012-03-31 23:47:00

做，你还是要在图像秀（在透明覆盖层下面）有一个固定的高度？ – 2012-04-01 08:47:09

是的，我想要悬停的所有图像都有相同的高度和宽度。 – ffffff01 2012-04-01 09:57:14

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

来源

2012-03-31 16:16:19

将图像悬停在另一张图像上

回答

相关问题