jQuery.clone（）的IE7、IE8问题

在我的页面上，我开发了一个水平滚动旋转木马。在页面加载时，我正在克隆每个

，并使用

appendTo（）

将它们添加到列表的末尾

我在IE7和IE8中遇到的问题如下：

中的每个
都有一个css
：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 -->

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

CSS只是一个基本的
：悬停
，但如下所示：

<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 -->

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

这听起来像是另一个使用CSS psuedo选择器的奇妙IE bug。我建议通过jQuery而不是CSS连接
：hover
和
：focus
事件。它在语义上是向后的，但是如果你需要支持IE7/8，你有时不得不做一些愚蠢的事情来让它工作

/* 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'）；
});

注意，我使用了委托事件handler，因此事件将适用于动态附加的任何
li
元素。
这听起来像是另一个带有CSS psuedo选择器的奇妙IE bug。我建议通过jQuery而不是CSS连接
：hover
和
：focus
事件。它在语义上是向后的，但是如果你需要支持IE7/8，你有时不得不做一些愚蠢的事情来让它工作

/* 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'）；
});

注意：我使用了委托事件管理器，因此事件将适用于动态附加的任何
li
元素。
谢谢您的回答。这种方法确实有效，但我对这个问题做了更多的挖掘。原来它是与Selectivizr有关的，所以它将原始事件复制到IE的新元素中！谢谢你的回答。这种方法确实有效，但我对这个问题做了更多的挖掘。原来它是与Selectivizr有关的，所以它将原始事件复制到IE的新元素中！