如何使用 jQuery 获取三个图像以在悬停时为不同的图像设置动画。包含代码

Question

您看到下面我的代码有问题吗？我正在尝试获取三个不同的图像，以便在悬停时调用不同的图像...它在一个图像上工作得很好，但添加额外的东西就会出现问题...我已经尝试了许多类和 ID 的变体，但我陷入困境这点非常感谢任何帮助。

CSS

.menu2 {
    padding: 0;
    list-style: none;
}
.menu2 li {
    float: left;
    position: relative;
}


.menu2, .1 a {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_capture_off.png) no-repeat center center;
}
.menu2, .1 a:hover {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_capture_on.png) no-repeat center center;
}
.menu2, .1 li em {
    background: url(images/btn_txt_capture.png) no-repeat;
    width: 218px;
    height: 88px;
    position: absolute;
    top:200px;
    left: 0;
    z-index: 2;
    display: none;
}


.menu2, .2 a {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_manage_off.png) no-repeat center center;
}
.menu2, .2 a:hover {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_manage_on.png) no-repeat center center;
}
.menu2, .2 a li em {
    background: url(images/btn_txt_manage.png) no-repeat;
    width: 218px;
    height: 88px;
    position: absolute;
    top:200px;
    left: 0;
    z-index: 2;
    display: none;
}



.menu2, .3 a {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_deliver_off.png) no-repeat center center;
}
.menu2, .3 a:hover {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_deliver_on.png) no-repeat center center;
}
.menu2, .3 a li em {
    background: url(images/btn_txt_deliver.png) no-repeat;
    width: 218px;
    height: 88px;
    position: absolute;
    top:200px;
    left: 0;
    z-index: 2;
    display: none;
}

HTML

<ul class="menu2"> 
                    <li class="1"> 
                        <a href="#"></a>        
                        <em></em>
                    </li> 
                    <li class="2"> 
                        <a href="#"></a>
                        <em></em>
                    </li> 
                    <li class="3"> 
                        <a href="#"></a>
                        <em></em>
                    </li> 
                </ul>

jQuery

$(".menu2 a.1").hover(function() {
                            $(this).next("em").animate({opacity: "show", top: "180"}, "slow");
                        }, function() {
                            $(this).next("em").animate({opacity: "hide", top: "200"}, "fast");
                        });

                        $(".menu2 a.2").hover(function() {
                            $(this).next("em").animate({opacity: "show", top: "180"}, "slow");
                        }, function() {
                            $(this).next("em").animate({opacity: "hide", top: "200"}, "fast");
                        });             

                        $(".menu2 a.3").hover(function() {
                            $(this).next("em").animate({opacity: "show", top: "180"}, "slow");
                        }, function() {
                            $(this).next("em").animate({opacity: "hide", top: "200"}, "fast");
                        });

Answer 1

将类名称从数字更改为以字母开头的名称。

css中的逗号表示OR。删除 .menu2 之后多余的逗号。

将 $(".menu2 a.1").hover 更改为 $(".menu2 .someclass1 a").hover，即 a 选择器需要放在最后。

似乎有效。
http://www.jsfiddle.net/edKys/9/

Answer 2

我让它工作了！

这是最终的代码

CSS

.menu2 {
    padding: 0;
    list-style: none;
}
.menu2 li {
    float: left;
    position: relative;
}


.menu2 .one a {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_capture_off.png) no-repeat center center;
}
.menu2 .one a:hover {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_capture_on.png) no-repeat center center;
}
.menu2 li em.one {
    background: url(images/btn_txt_capture.png) no-repeat;
    width: 218px;
    height: 88px;
    position: absolute;
    top:200px;
    left: 0;
    z-index: 2;
    display: none;
}


.menu2 .two a {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_manage_off.png) no-repeat center center;
}
.menu2 .two a:hover {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_manage_on.png) no-repeat center center;
}
.menu2 li em.two {
    background: url(images/btn_txt_manage.png) no-repeat;
    width: 218px;
    height: 88px;
    position: absolute;
    top:200px;
    left: 0;
    z-index: 2;
    display: none;
}



.menu2 .three a {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_deliver_off.png) no-repeat center center;
}
.menu2 .three a:hover {
    display: block;
    width: 218px;
    height:181px;
    background: url(images/btn_deliver_on.png) no-repeat center center;
}
.menu2 li em.three {
    background: url(images/btn_txt_deliver.png) no-repeat;
    width: 218px;
    height: 88px;
    position: absolute;
    top:200px;
    left: 0;
    z-index: 2;
    display: none;
}

jQuery

$(".menu2 a.one").hover(function() {
                            $(this).next("em").animate({opacity: "show", top: "180"}, "slow");
                        }, function() {
                            $(this).next("em").animate({opacity: "hide", top: "200"}, "fast");
                        });

                        $(".menu2 a.two").hover(function() {
                            $(this).next("em").animate({opacity: "show", top: "180"}, "slow");
                        }, function() {
                            $(this).next("em").animate({opacity: "hide", top: "200"}, "fast");
                        });             

                        $(".menu2 a.three").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 class="one"> 
                        <a href="#" class="one"></a>        
                        <em class="one"></em>
                    </li> 
                    <li class="two"> 
                        <a href="#" class="two"></a>
                        <em class="two"></em>
                    </li> 
                    <li class="three"> 
                        <a href="#" class="three"></a>
                        <em class="three"></em>
                    </li> 
                </ul>

我想感谢您的回答。之后！