IE에서 중첩 된 스타일이 CSS 스프라이트에서 동일한 이름을 재정의했습니다.

Question

위에 마우스를 올려 놓으면 이미지를 변경할 수있는 CSS 스프라이트가 있습니다. 그런 다음 jQuery를 사용하여 요소 위로 클래스를 추가하면 (배경 이미지를 변경하여) 페이드 인합니다. 이는 이미지 사이의 직선 커브가 아니라 마우스 오버 이미지 사이의 부드러운 전환을 원하기 때문입니다. 다른 사람에게.

Chrome 및 Firefox에서는 롤오버 및 페이드 효과가 정상적으로 작동합니다. 그러나 IE에서 동일한 이름을 가진 마지막 스타일은 잘못된 배경 이미지가있는 요소에 적용됩니다.

아래 예에서 #main a.style2.active는 style1에 대해 표시되는 배경 이미지입니다. 마지막 '활성'클래스가 하나의 IE를 선택하기 때문에 이것이라고 가정합니다.

어떻게 스타일 1이 #main.a 스타일 1 액티브 배경 이미지가 적용되도록 스타일을 재구성 할 수 있습니까?

<style media="screen"> 
    #main{ 
     width: 985px; 
     height: 600px; 
     background: url(../img/my.jpg); 
     margin: 0px; 
     padding: 0; 
     position: absolute; 
    } 
    #main li { 
     margin: 0; 
     padding: 0; 
     list-style: none; 
    } 

    #main a.style1 { left: 0px; width: 337px; top: 0px; height: 600px; position: absolute; } 
    #main a.style1.active { background: url(../img/my.jpg) -0px -600px; } 

    #main a.style2 { left: 337px; width: 330px; top: 0px; height: 600px; position: absolute; } 
    #main a.style2.active { background: url(../img/my.jpg) -337px -600px; } 
    </style> 

    <script> 
    $(document).ready(function(){ 

     $('.elem').mouseenter(function(){ 
      if ($(this).is(':animated')){ 
       $(this).stop(); 
      } 
      $(this).hide().addClass('active').fadeTo(750,1); 
     }); 

     $('.elem').mouseleave(function(){ 
      if ($(this).is(':animated')){ 
       $(this).stop(); 
      } 
      $(this).fadeTo(750, 0, function(){ 
       $(this).removeClass('active').css({'filter' : 'none', 'display' : 'block'}); 
      }); 
     }); 

}); 
    </script> 

    <ul id="main"> 
     <li><a class="elem style1" href="#"></a></li> 
     <li><a class="elem style2" href="#"></a></li> 
    </ul> 

Answer 1

는이 같은 뭔가 일을해야한다고 생각 :

#main a.style1 { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 337px; 
    height: 600px; 
    background-position: -0px -600px; 
} 

#main a.style2 { 
    position: absolute; 
    top: 0px; 
    left: 337px; 
    width: 330px; 
    height: 600px; 
    background-position: -337px -600px; 
} 

#main a.active { 
    background-image: url(../img/my.jpg); 
}