Mover elemento activo pierde evento de mouseout en Internet Explorer
En una biblioteca que estoy usando, tengo la tarea de mover un elemento al frente del dom cuando está suspendido. (Lo hago más grande, así que necesito verlo, luego lo encojo cuando muevo el mouse).
La biblioteca que estoy usando tiene una solución ordenada que usa appendChildren en el elemento activo para moverlo hasta el final de su padre, por lo tanto, hacia el final del dom y, a su vez, en la parte superior.
El problema es que creo que debido a que el elemento que está moviendo es el que está pasando sobre el evento mouseout se pierde. Su mouse todavía está sobre el nodo pero el evento mouseout no se está activando.
He eliminado la funcionalidad para confirmar el problema. Funciona bien en Firefox pero no en ninguna versión de IE. Estoy usando jquery aquí para la velocidad. Las soluciones pueden estar en JavaScript antiguo y simple ... lo cual sería una preferencia, ya que podría necesitar volver a funcionar.
No puedo usar el índice z aquí ya que los elementos son vml, la biblioteca es Raphael y estoy usando la llamada toFront. Muestra usando ul / li para mostrar el problema en un ejemplo simple
<!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: Aquí hay un enlace a js paste bin para verlo en acción.http://jsbin.com/obesa4
** Edición 2: ** Ver todos los comentarios sobre todas las respuestas antes de publicar, ya que hay mucha más información en eso.