三张图片，使用 jQuery 将鼠标悬停在动画上答案

【问题标题】：Three images, hover over with animation using jQuery三张图片，使用 jQuery 将鼠标悬停在动画上
【发布时间】：2011-01-24 03:35:22
【问题描述】：

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

您认为让每张图片分别为三张单独的图片制作动画的最佳方法是什么？

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>

【问题讨论】：

标签： jquery animation hover

【解决方案1】：

您可以扩展您的.menu2 li em 类，为您想要的不同图像提供三种变体，或者保持其广泛性并在样式标签中明确指定background 属性。您也可以使用 jQuery 来修改图像，但这会增加对脚本的依赖。

（这是假设您要更改的 background 属性）

【讨论】：