IE7, IE8 Emitir com jQuery .clone () - jquery, internet-explorer, clone

Na minha página eu desenvolvi um carrossel de rolagem horizontal. No carregamento da página eu estou clonando cada um dos <li>"s e usando appendTo() para adicioná-los ao final da lista.

A questão que estou tendo no IE7 e no IE8 é a seguinte: <a>"s dentro do <li> tem um css :hover/:focus que exibe um interior <div>. Nos navegadores acima mencionados, quando eu passar o mouse sobre o elemento clonado, ele mostra o estado de foco, mas no elemento que foi clonado a partir de em vez do novo elemento!

Alguma ideia do que poderia estar causando isso?

Minha marcação é a seguinte:

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

E meu jQuery é basicamente o seguinte:

var list = _this.find(".people-carousel");
list.find("li").clone().appendTo(list);

O CSS é apenas um básico :hover, mas é o seguinte:

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

Respostas:

Isso soa como outro bug maravilhoso do IE com CSS psuedo-selectors. Eu sugiro ligar o :hover e :focus eventos via jQuery em vez de CSS. É para trás semanticamente, mas se você precisa dar suporte ao IE7 / 8, às vezes você tem que fazer coisas estúpidas para fazê-lo funcionar.

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

Observe que usei hanlders de eventos delegados para que os eventos funcionem para qualquer li elementos que você adiciona dinamicamente.