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

Question

你好 friend ，

我正在尝试开发一个简单的图像查看器，正如您在我想要的给定图片中看到的那样，当用户将鼠标悬停在黑框上时，红色框将出现我在最后一个 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;
    }

提前致谢..:)

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这样您就可以看到它是如何工作的...