0

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

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

但必须有更好的方法。干杯。

4

1 回答 1

0

您可以使用许多 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>
于 2012-05-19T07:41:58.230 回答