IE7, IE8 문제 jQuery .clone()

Question

내 페이지에서 가로 스크롤하는 회전식 컨베이어를 개발했습니다. 페이지로드시 나는 각각 <li>을 복제하고 appendTo()을 사용하여 목록 끝에 추가합니다.

문제가 I IE7 데에 다음과 같이 IE8은 다음 <li> 내의 <a> '(S)의 각각은 CSS 내측 <div> 표시 :hover/:focus있다. 위에서 언급 한 브라우저에서 복제 된 요소 위로 마우스를 가져 가면 마우스 오버 상태가 표시되지만 요소에는 복제 된 에서 새 요소가 아닌!

어떤 원인 일 수 있습니까?

<ul class="people-carousel"> 
    <li> 
     <a style="background-image: url(/images/placeholder/pc-1.jpg)" href="#"> 
      <div class="hover"> 
       <span class="pc-name">Name here</span> 
       <span class="pc-position">Position</span> 
       <span class="pc-view">View profile</span> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a style="background-image: url(/images/placeholder/pc-1.jpg)" href="#"> 
      <div class="hover"> 
       <span class="pc-name">Name here</span> 
       <span class="pc-position">Position</span> 
       <span class="pc-view">View profile</span> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a style="background-image: url(/images/placeholder/pc-1.jpg)" href="#"> 
      <div class="hover"> 
       <span class="pc-name">Name here</span> 
       <span class="pc-position">Position</span> 
       <span class="pc-view">View profile</span> 
      </div> 
     </a> 
    </li> 
</ul><!-- /.people-carousel --> 

을 그리고 내 jQuery를 다음과 같은 기본적으로 :

var list = _this.find('.people-carousel'); 
list.find('li').clone().appendTo(list); 

CSS는 그냥 기본 :hover이지만, 다음과 다음과 같이

내 마크 업이다

/* Default */ 
.people-carousel .hover { 
    position: absolute; 
    top:40px;right:0;left:0; 
    height: 107px; 
    background: #ff6634; 
    padding: 18px; 
    color: #fff; 
    opacity: 0; 

    -webkit-transform-origin: 50% 100%; 
    -moz-transform-origin: 50% 100%; 
    -ms-transform-origin: 50% 100%; 
    -o-transform-origin: 50% 100%; 
    transform-origin: 50% 100%; 

    -webkit-transform: scale(.5); 
    -moz-transform: scale(.5); 
    -ms-transform: scale(.5); 
    -o-transform: scale(.5); 
    transform: scale(.5); 

    -webkit-transition: .1s ease-out; 
    -moz-transition: .1s ease-out; 
    -ms-transition: .1s ease-out; 
    -o-transition: .1s ease-out; 
    transition: .1s ease-out; 
} 

/* Hover */ 
.people-carousel a:hover .hover, .people-carousel a:focus .hover { 
    opacity: 1; 
    top: 0; 

    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    transform: scale(1); 
} 

Answer 1

이것은 CSS psuedo-selector가있는 멋진 IE 버그입니다. CSS 대신 jQuery를 통해 :hover 및 :focus 이벤트를 연결하는 것이 좋습니다. 거꾸로 의미가 있지만 IE7/8을 지원해야하는 경우 가끔은 어리석은 일을해야 할 때가 있습니다. 이벤트가 동적으로 추가 어떤 li 요소 작동 할 수 있도록

/* Hover */ 
.people-carousel a.highlight .hover { 
    opacity: 1; 
    top: 0; 

    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    transform: scale(1); 
} 

$('.people-carousel') 
    .on('focus mouseenter', 'a', function() { 
     $(this).addClass('highlight'); 
    }) 
    .on('blur mouseleave', 'a', function() { 
     $(this).removeClass('highlight'); 
    }); 

주 나는 위임 이벤트 hanlders을 사용했다.