三张图像，使用 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 来修改图像，但这会增加对脚本工作的依赖性。

（假设它是您要更改的背景属性）