Question

I have 6 images in a line, the first one when the page loads has a class applied to it which using CSS3 applies web transformations. When the other images are hovered over the same class is applied to these, then removed when mouseout. The final thing I need to achieve is that when the other images are hovered over the first one has the class removed, and if no images are hovered over the first one has its class applied to it again.

Here is what I have so far:

$(document).ready(function() {
    $("#imagePackshot li img").hover(function(){
        $(this).addClass('packshot').siblings().removeClass('packshot');
    },
    function () {
        $(this).removeClass('packshot');
    })
    .first().addClass('packshot');
});

Answer 1

You’ll want to check after you remove a class whether there are no other images with the class ‘packshot’, in that case add it to the first one.

 $(document).ready(function() {
        var activeClass = 'packshot', images = $("#gallerySlideshow li img");
        var first = images.first().addClass(activeClass);
        images.hover(function(){
            // remove the class from all images who still have it, most likely only one.
            images.filter("."+activeClass).removeClass(activeClass); 
            // add class to the element that was hovered.
            $(this).addClass(activeClass);
        },
        function () {
            // remove class from the image that was hovered out of
            $(this).removeClass(activeClass);
            // if no other images have the active class, then give it to the first image
            if(!images.filter("."+activeClass).size()){
               first.addClass(activeClass);
            }
        })
  });

Edit:

The code is using this html structure, based on the link you posted, which means you can’t use “siblings” to refer to the next images, since the images aren’t siblings in the html tree:

<ul id="gallerySlideshow">
    <li>
        <a href="page9.html"><img src="thumbnails/thumb9.jpg" width="158" height="236" /></a>
        <ul id="noimg">
            <li>
                <a href=""><img src="Images/more-like-this.png" /></a>
            </li>
        </ul>
    </li>

    <li>
        <a href="page9.html"><img class="box2" src="thumbnails/thumb1.jpg" /></a>
        <ul id="noimg">
            <li>
                <a href=""><img src="Images/more-like-this.png" /></a>
            </li>
        </ul>
    </li>

    <li>
        <a href="page9.html"><img class="box" src="thumbnails/thumb3.jpg"  /></a>
        <ul id="noimg">
            <li>
                <a href=""><img src="Images/more-like-this.png" /></a>
            </li>
        </ul>
    </li>



    <li>
        <a href="page9.html"><img class="box1" src="thumbnails/thumb4.jpg" /></a>
        <ul id="noimg">
            <li>
                <a href=""><img src="Images/more-like-this.png" /></a>
            </li>
        </ul>
    </li>

    <li>
        <a href="page9.html"><img class="box3" src="thumbnails/thumb5.jpg" /></a>
        <ul id="noimg">
            <li>
                <a href=""><img src="Images/more-like-this.png" /></a>
            </li>
        </ul>
    </li>

    <li>
        <a href="page9.html"><img class="box4" src="thumbnails/thumb6.jpg" /></a>
        <ul id="noimg">
            <li>
                <a href=""><img src="Images/more-like-this.png" /></a>
            </li>
        </ul>
    </li>
</ul>