jquery - jQuery .clone() に関する IE7、IE8 の問題

Question

私のページでは、水平スクロール カルーセルを開発しました。ページの読み込み時に、各 のクローンを作成し<li>、 を使用appendTo()してそれらをリストの最後に追加しています。

私がIE7とIE8 で抱えている問題は次のとおり<a>です。前述のブラウザでは、複製された要素にカーソルを合わせると、ホバー状態が表示されますが、要素では、新しい要素ではなく複製されています!<li>:hover:focus<div>

何がこれを引き起こしているのでしょうか？

私のマークアップは次のとおりです。

<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);
}