Три изображения, наведите курсор мыши на анимацию с помощью jQuery

Question

У меня есть три изображения, которые, при наведении, должны показывать каждое отдельное изображение под ними. Приведенный ниже код работает для одного из них, но он показывает одно и то же изображение три раза и вызывает то же самое изображение при наведении курсора.

Какой, по вашему мнению, лучший способ заставить каждое из изображений анимировать три отдельных изображения?

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

Вы можете расширить класс .menu2 li em, чтобы иметь три варианта для разных изображений, которые вам нужны, или оставить его широким и явно указать атрибут background в теге стиля. Вы также можете использовать jQuery для изменения изображения, но это добавляет зависимость от скрипта для работы.

(предполагается, что это атрибут background, который вы хотите изменить)