Mover elemento ativo perde evento de mouseout no Internet Explorer
Em uma biblioteca que estou usando, tenho a tarefa de mover um elemento para a frente do dom quando ele passa o mouse. (Eu o aumento, preciso vê-lo e depois encolho-o quando o mouse sai).
A biblioteca que estou usando possui uma solução elegante, que usa appendChildren no elemento ativo para movê-lo para o final, seu pai, ainda mais para o final do dom e, por sua vez, no topo.
O problema é que acredito que, porque o elemento que você está movendo é o que você está passando sobre o evento de mouseout se perde. Seu mouse ainda está sobre o nó, mas o evento de mouseout não está sendo disparado.
Reduzi a funcionalidade para confirmar o problema. Funciona bem no Firefox, mas não em nenhuma versão do IE. Estou usando jquery aqui para velocidade. As soluções podem estar em javascript antigo simples, o que seria uma preferência, pois pode ser necessário voltar ao fluxo inicial.
Não posso usar o z-index aqui, pois os elementos são vml, a biblioteca é Raphael e estou usando a chamada toFront. Exemplo usando ul / li para mostrar o problema em um exemplo simples
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
li
{
border:1px solid black;
}
</style>
</head>
<body>
<ul><li>Test 1</li></ul>
<ul><li>Test 2</li></ul>
<ul><li>Test 3</li></ul>
<ul><li>Test 4</li></ul>
<script>
$(function(){
$("li").mouseover(function(){
$(this).css("border-color","red");
this.parentNode.appendChild(this);
});
$("li").mouseout(function(){
$(this).css("border-color","black");
});
});
</script>
</body>
</html>
Editar: Aqui está um link para um js paste bin para vê-lo em ação.http://jsbin.com/obesa4
** Editar 2: ** Veja todos os comentários em todas as respostas antes de postar mais informações.