How can I get three images to animate a different image on hover using jQuery.. Code included

Do you see the is开发者_JS百科sue with my code below? I am trying to get three different images to invoke a different image each on hover... It works great with one but something is off with adding additional... I've tried many variations with classes and IDs but I'm stuck at this point so any help is greatly appreciated.

CSS

.menu2 {
    padding: 0;
    list-style: none;
}
.menu2 li {
    float: left;
    position: relative;
}


.menu2, .1 a {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_capture_off.png) no-repeat center center;
}
.menu2, .1 a:hover {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_capture_on.png) no-repeat center center;
}
.menu2, .1 li em {
    background: url(images/btn_txt_capture.png) no-repeat;
    width: 218px;
    height: 88px;
    position: absolute;
    top:200px;
    left: 0;
    z-index: 2;
    display: none;
}


.menu2, .2 a {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_manage_off.png) no-repeat center center;
}
.menu2, .2 a:hover {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_manage_on.png) no-repeat center center;
}
.menu2, .2 a li em {
    background: url(images/btn_txt_manage.png) no-repeat;
    width: 218px;
    height: 88px;
    position: absolute;
    top:200px;
    left: 0;
    z-index: 2;
    display: none;
}



.menu2, .3 a {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_deliver_off.png) no-repeat center center;
}
.menu2, .3 a:hover {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_deliver_on.png) no-repeat center center;
}
.menu2, .3 a li em {
    background: url(images/btn_txt_deliver.png) no-repeat;
    width: 218px;
    height: 88px;
    position: absolute;
    top:200px;
    left: 0;
    z-index: 2;
    display: none;
}

HTML

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

jQuery

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

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

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

Change the class names from a number to something starting with a letter.

A comma in css means OR. removing the extra comma after .menu2.

Change the $(".menu2 a.1").hover to $(".menu2 .someclass1 a").hover, the a selector needs to come last.

seems to work. http://www.jsfiddle.net/edKys/9/

I got it to work!

Here is the final code

CSS

.menu2 {
    padding: 0;
    list-style: none;
}
.menu2 li {
    float: left;
    position: relative;
}


.menu2 .one a {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_capture_off.png) no-repeat center center;
}
.menu2 .one a:hover {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_capture_on.png) no-repeat center center;
}
.menu2 li em.one {
    background: url(images/btn_txt_capture.png) no-repeat;
    width: 218px;
    height: 88px;
    position: absolute;
    top:200px;
    left: 0;
    z-index: 2;
    display: none;
}


.menu2 .two a {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_manage_off.png) no-repeat center center;
}
.menu2 .two a:hover {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_manage_on.png) no-repeat center center;
}
.menu2 li em.two {
    background: url(images/btn_txt_manage.png) no-repeat;
    width: 218px;
    height: 88px;
    position: absolute;
    top:200px;
    left: 0;
    z-index: 2;
    display: none;
}



.menu2 .three a {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_deliver_off.png) no-repeat center center;
}
.menu2 .three a:hover {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_deliver_on.png) no-repeat center center;
}
.menu2 li em.three {
    background: url(images/btn_txt_deliver.png) no-repeat;
    width: 218px;
    height: 88px;
    position: absolute;
    top:200px;
    left: 0;
    z-index: 2;
    display: none;
}

jQuery

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

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

                        $(".menu2 a.three").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 class="one"> 
                        <a href="#" class="one"></a>        
                        <em class="one"></em>
                    </li> 
                    <li class="two"> 
                        <a href="#" class="two"></a>
                        <em class="two"></em>
                    </li> 
                    <li class="three"> 
                        <a href="#" class="three"></a>
                        <em class="three"></em>
                    </li> 
                </ul>

I wanted to thank you for your answer. Later!