Question

我的<ul>包含<li>，其中包含图像。我想让每个图像在悬停时缩放到更大的尺寸，并且变得不透明。但是，在悬停时，当图像变大时，图像会被下一个图像覆盖。我不确定我是否将z-index放在正确的位置......这是我到目前为止的css代码：

.artgallery {
    background-color:rgba(255,255,255,0.8);
    color:#fff;
    width:100%;
    padding:0px;
    margin:0;
    height:80%;
    overflow:auto;
    position:absolute;
    top:10%;
}

.artgallery ul {
    list-style: none;
    position:relative;
    text-align: center;
    width: 100%;
    padding-top:5px;
}

.artgallery li {
    position:relative;
    display: inline-block;
    vertical-align: top;
    width:19%;
    opacity:.7;
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    z-index:0;
}

.artgallery li:hover {
    opacity:1;
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    z-index:100;
}

.artgallery img {
    height: 100px;
    width:100%;
}

.artgallery a {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

这是html：

<div class="artgallery">        
    <img src="images/art.png" style="width:66px;height:66px;position:absolute;top:2px;left:5px;z-index:2;">
    <ul>
        <li><a href="art/22.jpg" data-lightbox="art" title=" "><img src="art/22_thumb.jpg"></a> </li>
        <li><a href="art/21.jpg" data-lightbox="art" title=" "><img src="art/21_thumb.jpg"></a></li>
        <li><a href="art/20.jpg" data-lightbox="art" title=" "><img src="art/20_thumb.jpg"></a></li>
        <li><a href="art/19.jpg" data-lightbox="art" title=" "><img src="art/19_thumb.jpg"></a>   </li>
        <li><a href="art/18.jpg" data-lightbox="art" title=" "><img src="art/18_thumb.jpg"></a></li>
        <li><a href="art/17.jpg" data-lightbox="art" title=" "><img src="art/17_thumb.jpg"></a></li>
        <li><a href="art/16.jpg" data-lightbox="art" title="WIP"><img src="art/16_thumb.jpg"></a></li>
        <li><a href="art/15.jpg" data-lightbox="art" title=" "><img src="art/15_thumb.jpg"></a></li>
        <li><a href="art/14.jpg" data-lightbox="art" title=" "><img src="art/14_thumb.jpg"></a></li>
        <li><a href="art/13.jpg" data-lightbox="art" title=" "><img src="art/13_thumb.jpg"></a></li>
        <li><a href="art/12.jpg" data-lightbox="art" title="WIP"><img src="art/12_thumb.jpg"></a></li>
        <li><a href="art/11.jpg" data-lightbox="art" title=" "><img src="art/11_thumb.jpg"></a></li>
        <li><a href="art/10.jpg" data-lightbox="art" title="WIP"><img src="art/10_thumb.jpg"></a></li>
        <li><a href="art/9.jpg" data-lightbox="art" title=" "><img src="art/9_thumb.jpg"></a></li>
        <li><a href="art/8.jpg" data-lightbox="art" title=" "><img src="art/8_thumb.jpg"></a></li>
        <li><a href="art/7.jpg" data-lightbox="art" title=" "><img src="art/7_thumb.jpg"></a></li>
        <li><a href="art/6.jpg" data-lightbox="art" title=" "><img src="art/6_thumb.jpg"></a></li>
        <li><a href="art/5.jpg" data-lightbox="art" title=" "><img src="art/5_thumb.jpg"></a></li>
        <li><a href="art/4.jpg" data-lightbox="art" title=" "><img src="art/4_thumb.jpg"></a></li>
        <li><a href="art/3.jpg" data-lightbox="art" title=" "><img src="art/3_thumb.jpg"></a></li>
        <li><a href="art/2.jpg" data-lightbox="art" title="paint doodles"><img src="art/2_thumb.jpg"></a></li>
        <li><a href="art/1.jpg" data-lightbox="art" title="circa 2007"><img src="art/1_thumb.jpg"></a></li>
    </ul>
</div>

Answer 1

CSS没问题，顺便说一下你不需要重复转换属性：hover pseudo-class：

.artgallery li:hover{
    opacity:1;        
    z-index:100;
}

您还可以尝试将悬停元素img设为更高的z-index（比抱歉更安全）：

.artgallery li:hover img{
    position: relative;        
    z-index:200;
}

如何更改li悬停时的z-index？

1 个答案: