Question

我在一行中有6个图像，第一个在页面加载时有一个类应用于它，使用CSS3应用Web转换。当其他图像悬停在同一类上时会应用于这些图像，然后在mouseout时删除。我需要做的最后一件事是当其他图像悬停在第一个图像上时，删除了类，如果没有图像悬停在第一个图像上，则将其类应用于它。

这是我到目前为止所做的：

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

Answer 1

您要删除课程后检查是否没有其他带有“packshot”类的图像，在这种情况下将其添加到第一个。

 $(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);
            }
        })
  });

编辑：

代码使用此html结构，基于您发布的链接，这意味着您不能使用“兄弟姐妹”来引用下一个图像，因为图像不是html树中的兄弟：

<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>

将jQuery添加到其他元素时删除类

1 个答案: