IE7，IE8与jQuery .clone（）的问题

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

Answer 1

这听起来像CSS伪造选择器的另一个奇妙的IE错误。我建议通过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个元素。