三个图像，使用jQuery将鼠标悬停在动画上

我有三个图像，在悬停时，每个图像都需要显示一个单独的动画图像。下面的代码适用于其中一个，但它三次显示相同的图像，并调用相同的悬停图像

您认为让每个图像为三个单独的图像设置动画的最佳方法是什么

CSS

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

您可以扩展

.menu2 li em

类，为所需的不同图像提供三种变体，或者将其保持宽泛，并在样式标记中明确指定

background

属性。您也可以使用jQuery修改图像，但这会增加对脚本的依赖性

（假设您要更改的是

background

属性）

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



    });

        <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>