css - 重叠的照片

Question

我试图设置一种当您将鼠标悬停在照片上时查看照片的方式，但我在 float 和定位方面遇到了一些问题。我让它像这样工作......

**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 插件来快速实现这一目标。

例如，试试bootstrap插件:

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>