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属性）

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

1 个答案: