Question

I have three images that, on hover, need to each show a separate image animated underdeath them. The code below works for one of them but it shows the same image three times and invokes the same hover image as well.

What do you think is the best way to make each of the images animate three separate images?

CSS

   .menu2 {
    padding: 0;
    list-style: none;
}
.menu2 li {
    float: left;
    position: relative;
}
.menu2 a {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_off.png) no-repeat center center;
}
.menu2 li em {
    background: url(images/btn_txt.png) no-repeat;
    width: 218px;
    height: 88px;
    position: absolute;
    top:200px;
    left: 0;
    z-index: 2;
    display: none;
}

jQuery

 $(document).ready(function(){

        $(".menu2 a").hover(function() {
            $(this).next("em").animate({opacity: "show", top: "180"}, "slow");
        }, function() {
            $(this).next("em").animate({opacity: "hide", top: "200"}, "fast");
        });



    });

HTML

        <ul class="menu2"> 
            <li> 
                <a href="#"></a>        
                <em></em>
            </li> 
            <li> 
                <a href="#"></a>
                <em></em>
            </li> 
            <li> 
                <a href="#"></a>
                <em></em>
            </li> 
        </ul> 

Answer 1

You can either expand your .menu2 li em class to have three variations for the different images you want, or keep it broad and explicitly specify the background attribute in the style tag. You could also use jQuery to modify the image, but this adds a dependency on the script to work.

(this is assuming it’s the background attribute you’re looking to alter)