Как я могу получить три изображения для анимации другого изображения при наведении курсора с помощью jQuery .. Код включен

Question

Видите ли вы проблему с моим кодом ниже? Я пытаюсь получить три разных изображения, чтобы вызывать разные изображения при наведении курсора ... Он отлично работает с одним, но что-то не так с добавлением дополнительных ... Я пробовал много вариантов с классами и идентификаторами, но застрял на этот пункт, поэтому любая помощь очень ценится.

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");
                        });

Answer 1

Я получил его на работу!

Вот окончательный код

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>

Я хотел бы поблагодарить вас за ваш ответ.Позже!

Answer 2

Измените имена классов с числа на что-то, начинающееся с буквы.

Запятая в css означает ИЛИ. удаление лишней запятой после .menu2.

Измените $(".menu2 a.1").hover на $(".menu2 .someclass1 a").hover, селектор a должен стоять последним.

похоже на работу. http://www.jsfiddle.net/edKys/9/