Question

我在youtube上看到一个关于制作转场画廊的精彩视频（http://www.youtube.com/watch?v=4sVTWY608go）。我试着向右滑动..

现在，我想做出改变。我想给第一张图像一个不同的宽度说（530px）和其他图像（40px）。然后，当用户悬停在任何其他图像（不是img no.1）上时，图像no.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;
}

=== image no.1 width

#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;}

Answer 2

我认为这可以通过javascript以非常简单的方式完成，所以没有必要尝试用css完成它。

您只需要添加onMouseOver属性，然后使用javascript代码执行任何操作。

如果您要求，我可以发布代码。

通过类访问CSS

2 个答案: