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> 

나는 당신의 대답에 감사하고 싶었다이다. 후에!