使用css的图像查看器无法正常工作

Question

Hello Friends，

我正在尝试开发一个简单的图像查看器，因为你可以在给定的图片中看到我想要当用户将鼠标悬停在黑盒子上然后红色框会出现我在最后一个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;
    }

提前致谢.. :)）

Answer 1

我为你重复了这个。试试这个，你应该很好。看起来你的相对和绝对定位混淆了。

<强> 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); 
    }

Here's the jsfiddle所以你可以看到它是如何运作的......