IE7, IE8 Issue with jQuery .clone()

Question

在我的页面上，我开发了一个水平滚动轮播。在页面加载时，我正在克隆每个<li>并使用appendTo()将它们添加到列表的末尾。

我在IE7和IE8中遇到的问题如下：<li>中的每个<a>都有一个css :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元素。