CSS Access ID through class

Question

I saw a nice video on youtube about making transional gallery (http://www.youtube.com/watch?v=4sVTWY608go). I tried to do the slider right..

Now, I want to make a change. I want to give the first image a different width say(530px) and the other images(40px). Then when a user hover on any other images(not img no.1) the width of image no.1 change to be like(40px) and the hovering one (530px). how can I do that.

Here is my code:

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

===SET THE WIDTH OF THE IMAGES IN a

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

=== when hovering on all the images except image no.1

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

=== here is the problem I don't know how can I change it's width when user hover on other images

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

Any help

TIA

Answer 1

If I understand your question correctly, here is one possible solution:

Demo Fiddle

The trick here is to set the CSS :hover to key off of the wrapping element, and then overwrite it with more specificity.

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

I think this would be done with javascript in a very easy way, so there's no point in trying to accomplish it with only css.

You would only need to add onMouseOver attributes and then do whatever you want with the javascript code.

I can post the code if you ask for it.