0

ここに画像の説明を入力

皆さん、こんにちは、

与えられた写真でわかるように、単純な画像ビューアを開発しようとしていますユーザーが黒いボックスにカーソルを合わせると赤いボックスが表示されますユーザーが最後のdivにカーソルを合わせると最後のdivで問題が発生しました赤いdivが外に出ます助けてください自分 。のみを使用してこれを解決する方法はありますかCSS。私のコードを見てください

CSS

div{float:left; text-align:center; font-size:16px; color:#404040; margin:0 30px 20px 30px; position:relative;

    .viewer{
        position:absolute;
        width:300px;
        background:red;
        height:400px;
        top:20px;
        left:110px;
    }

前もって感謝します .. ：）

4

1 に答える 1

0

私はあなたのためにこれを作り直しました。これを試してみてください。うまくいくはずです。相対位置と絶対位置が混同されているようです。

HTML

<!-- Begin Image Hover -->
<ul class="enlarge">
    <!-- First Image -->
    <li>
        <img src="image.jpg" width="150px" height="100px" alt="Dechairs" /><span><img src="image.jpg" alt="Deckchairs" /><br />Deckchairs on Blackpool beach</span>
    </li>
    <!-- Second Image -->
    <li>
        <img src="image.jpg" width="150px" height="100px" alt="Blackpool sunset" /><span><img src="image.jpg" alt="Blackpool sunset" /><br />Sunset over the Irish Sea at Blackpool</span>
    </li>

    <!-- Third Image -->
    <li>
        <img src="image.jpg" width="150px" height="100px" alt="Blackpool pier" /><span><img src="image.jpg" alt="Blackpool pier" /><br />Rolling waves off Blackpool North Pier</span>
    </li>
</ul> <!-- End Image Hover -->

そして今CSS...

ul.enlarge{
    list-style-type:none; /*remove the bullet point*/
    margin-left:0;
    }

ul.enlarge li{
    display:inline-block;
    position: relative;
    z-index: 0;
    margin:10px 40px 0 20px;
    }

ul.enlarge img{
    background-color:#eae9d4;
    padding: 6px;
    -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    }

ul.enlarge span{
    position:absolute;
    left: -9999px;
    background-color:#eae9d4;
    padding: 10px;
    font-family: 'Droid Sans', sans-serif;
    font-size:.9em;
    text-align: center; 
    color: #495a62; 
    -webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
    -moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
    box-shadow: 0 0 20px rgba(0,0,0, .75);
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius:8px;
    }

ul.enlarge li:hover{
    z-index: 50;
    cursor:pointer;
    }

ul.enlarge span img{
    padding:2px;
    background:#ccc;
    }

ul.enlarge li:hover span{ 
    top: -300px;
    left: -20px;
    }

ul.enlarge li:hover:nth-child(2) span{
    left: -100px; 
    }

ul.enlarge li:hover:nth-child(3) span{
    left: -200px; 
    }

/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
ul.enlarge img, ul.enlarge span{
    behavior: url(pie/PIE.htc); 
    }

ここにjsfiddleがあるので、それがどのように機能するかを見ることができます...

于 2013-08-07T13:48:34.843 に答える