重疊的照片

Question

我試圖設置一種查看照片，當你把它們懸停在他們身上，我有一些浮動和定位的麻煩。我已經得到了這樣的工作...

**HTML** 

<div id="container-collection"> 

    <div id="clothes1"><img src="Images/smallest/JPEG/IMG_3148.jpg" alt="1" width="211" height="316" onMouseOver="MM_showHideLayers('closeup1','','show')" onMouseOut="MM_showHideLayers('closeup1','','hide')"></div><div id="clothes2"><img src="Images/smallest/JPEG/IMG_3124.jpg" alt="2" width="211" height="316" onMouseOver="MM_showHideLayers('closeup2','','show')" onMouseOut="MM_showHideLayers('closeup2','','hide')"></div> 
    <div id="closeup1"><img src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg" width="432" height="648" alt="11"></div> <div id="closeup2"><img src="Images/Smaller/bigger ones/JPEG/IMG_3124_1.jpg" width="432" height="648" alt="11"></div> 

</div> 


**CSS** 

#container-collection { width: 900px; margin:0 auto; padding-top: 90px; } 

#clothes1 { float:left; left:0px; top:5px; width:209px; height:316px; z-index:1; } 

#clothes2 { float:left; left:5px; top:5px; width:209px; height:316px; z-index:1; } 

#closeup1 { float:left; left:400px; top:-316px; width:427px; height:648px; z-index:2; visibility: hidden; } 

#closeup2 { position:relative; left:423px; top:-648px; width:427px; height:648px; z-index:3; visibility: hidden; } 

但是，這是一個更好的方法。 乾杯。

Answer 1

有很多JavaScript插件可以用來快速實現這一點。

例如，嘗試引導插件：

http://twitter.github.com/bootstrap/javascript.html#popovers

注：該data-content屬性在<a>標籤可以容納HTML內容。只要注意使用引號。

<a href="#" rel="popover" data-content="<img src='image2.jpg' />" data-original-title="A Title"> 
<img src="image1.jpg" border="0" /> 
</a> 

可選，一個更簡單的版本顯示預覽只能與CSS來實現，利用懸停。

<style> 
    a.info 
    { 
     position: relative; /*this is the key*/ 
     z-index: 204; 
     color: #000; 
     text-decoration: none; 
    } 

    a.info:hover 
    { 
     z-index: 205; 
     background-color: gainsboro; 
    } 

    a.info span{display: none} 

    a.info:hover span 
    { 
     /*the span will display just on :hover state*/ 
     display: block; 
     position: absolute; 
     top: 3em; 
     left: 1em; 
    } 
</style> 

<a class="info" href="javascript:focus();"> 
<img src="image1.jpg" /><span><img src="image2.jpg" /></span> 
</a>