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 に答える