圖像瀏覽器不能正常工作

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，所以你可以看到它是如何工作的？