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插件来快速实现此目的。

例如，尝试使用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>

重叠的照片

1 个答案: