图像浏览器不能正常工作

Question

朋友你好，

我想开发一个简单的图像浏览器，你可以在给定的图片中看到我想要当黑盒子那么红框用户将鼠标悬停会出现我在最后一个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，所以你可以看到它是如何工作的？