Переместить активный элемент теряет событие mouseout в Internet Explorer
В библиотеке, которую я использую, у меня есть задача переместить элемент в начало dom, когда он находится над ним. (Я делаю его больше, поэтому мне нужно увидеть его, а затем уменьшить его, когда мышь вынута).
У библиотеки, которую я использую, есть аккуратное решение, которое использует appendChildren на активном элементе, чтобы переместить его к концу его родителя так далее к концу dom и, в свою очередь, сверху.
Проблема в том, что я считаю, что, поскольку элемент, который вы перемещаете, - это элемент, на который вы наводите курсор мыши, событие потеряно. Ваша мышь все еще находится над узлом, но событие mouseout не запускается.
Я сократил функциональность, чтобы подтвердить проблему. Он отлично работает в Firefox, но не в любой версии IE. Я использую jquery здесь для скорости. Решения могут быть в простом старом javascript .. который будет предпочтительным, так как может потребоваться вернуться вверх по течению.
Я не могу использовать z-index здесь, поскольку элементы vml, библиотека Raphael, и я использую вызов toFront. Пример использования ul / li для демонстрации проблемы в простом примере
<!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>
Редактировать: Вот ссылка на js paste bin, чтобы увидеть его в действии.http://jsbin.com/obesa4
** Изменить 2: ** См. Все комментарии на все ответы, прежде чем публиковать как можно больше информации в этом.