1

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

我在 IE7 和 IE8 中遇到的问题如下： 中的每个<a>'s<li>都有一个 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);
}
4

1 回答 1

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您动态附加的任何元素。

于 2013-11-01T11:27:17.523 回答