Question

我需要一个简单的图库，所以我决定在CSS上构建它，并尝试在网络中找到合适的东西。我发现了一些非常接近我想要的东西，这里是应用的CSS样式：

<html>
<head>
<title>Gallery</title>
<style type="text/css">
body {
    margin: 0 auto;
    padding: 0;
    width: 500px;
    color: #000000;
    font: normal 80%/120% Georgia, "Times New Roman", Times, serif;
}
a
{
    color: #000000;
}

.gallery {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gallery li {
    margin: 10px;
    padding: 0;
    float: left;
    position: relative;
    width: 120px;
    height: 100px;
}
.gallery img {
    background: #fff;
    border: solid 1px #ccc;
    padding: 4px;
    width: 110;
    height: 90;
}
.gallery span {
    width: 77px;
    height: 27px;
    display: block;
    position: absolute;
    top: -12px;
    left: 50px;
    background: url(images/tape.png) no-repeat;
}
.gallery a:hover img {border: 1px solid #0000ff; width:400; height:300; overflow: auto}
</style>
</head>

<body>
<ul class="gallery">
    <li><a href="#"><span></span><img src="image/8.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/9.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/4.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/7.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/5.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/6.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/3.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/1.jpg" alt="image" /></a></li>
    <li><a href="#"><span></span><img src="image/2.jpg" alt="image" /></a></li>
</ul>
</body>
</html>

实际上我甚至不知道为什么我需要.gallery span{}（这里可能有一些提示）但主要问题是： PIC1：

enter image description here

这就是我的画廊看起来的样子，我希望它看起来像那样，但是当我a：悬停并放大图像时，这就是发生的事情

PIC2：

enter image description here

并再清楚一张图片

PIC3：

enter image description here

我需要和想要完成的是所有放大的图像，如下所示：

PIC4：

enter image description here

但很明显在缩略图前面。请帮忙。

由于

Leron

Answer 1

您需要使用z-index属性：

.gallery a:hover img {
    ....
    z-index: 10;
}

Answer 2

将position: relative;添加到您的正文样式，从.gallery li中删除position: relative;，然后将position: absolute; top: 0; left: 0;添加到.gallery a：hover img。

你的最终CSS是：

    <style type="text/css">
    body {
        margin: 0 auto;
        padding: 0;
        width: 500px;
        color: #000000;
        font: normal 80%/120% Georgia, "Times New Roman", Times, serif;
        position: relative;
    }
    a
    {
        color: #000000;
    }

    .gallery {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .gallery li {
        margin: 10px;
        padding: 0;
        float: left;
        width: 120px;
        height: 100px;
    }
    .gallery img {
        background: #fff;
        border: solid 1px #ccc;
        padding: 4px;
        width: 110;
        height: 90;
    }
    .gallery span {
        width: 77px;
        height: 27px;
        display: block;
        position: absolute;
        top: -12px;
        left: 50px;
        background: url(images/tape.png) no-repeat;
    }
    .gallery a:hover img {border: 1px solid #0000ff; width:400; height:300; overflow: auto; position: absolute; top: 0; left: 0;}
    </style>

CSS图库调整

2 个答案: