html - 通过类的 CSS 访问 ID

Question

我在 youtube 上看到了一个关于制作过渡画廊的精彩视频 (http://www.youtube.com/watch?v=4sVTWY608go)。我试着做正确的 slider ..

现在，我想做出改变。我想给第一张图片一个不同的宽度(530px)和其他图片(40px)。然后，当用户将鼠标悬停在任何其他图像(不是 img 1 号)上时，1 号图像的宽度变为(40px)和悬停的图像(530px)。我该怎么做。

这是我的代码:

HTML

<div class="divSlider">

        <ul>

            <li id="slideImg1"><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>

        </ul>

</div>

=========

CSS

===设置图片的宽度

.divSlider li a{
    width: 30px;
    height: 500px;
    text-decoration: none;
    color: black;
    display: block;
    border: 2px solid gray;
    border-radius: 5px;
}

===1号图宽度

#slideImg1 a{
    width: 540px;    
}

===鼠标悬停在除1号图片以外的所有图片上时

.divSlider li a:hover{
    width: 520px;   
}

=== 问题是我不知道当用户将鼠标悬停在其他图像上时如何更改它的宽度

#slideImg1 li a:hover{
    width: 20px;    
}

任何帮助

TIA

Answer 1

如果我正确理解你的问题，这里有一个可能的解决方案:

Demo Fiddle

这里的技巧是将 CSS :hover 设置为关闭包装元素，然后更具体地覆盖它。

CSS:

/* initial setup */
li{ display: inline-block;}

a {
    display: block;
    width: 40px;
    height: 150px;
    background: url(http://www.placehold.it/150x150) no-repeat;
    -webkit-transition: .3s;
    transition: .3s;
}   
#slideImg1 a { width: 150px;}

/* hover states */
.divSlider:hover #slideImg1 a {width: 50px;}

.divSlider ul #slideImg1 a:hover {width: 150px;}

a:hover { width: 150px;}