將圖像懸停在另一張圖像上

我正試圖在一些圖像上添加一些懸停效果。將圖像懸停在另一張圖像上

<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

將圖像懸停在另一張圖像上

回答

相關問題