В библиотеке, которую я использую, у меня есть задача перемещать элемент на фронт dom, когда он зависает. (Я делаю это больше, поэтому мне нужно это увидеть, а затем сжимать его при выводе мыши).
Библиотека, которую я использую, имеет аккуратное решение, которое использует appendChildren на активном элементе, чтобы переместить его в конец своего родителя так дальше к концу dom и, в свою очередь, сверху.
Проблема заключается в том, что я считаю, что поскольку элемент, который вы перемещаете, тот, который вы наводите на событие mouseout, теряется. Ваша мышь все еще находится над node, но событие 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, чтобы увидеть ее в действии. http://jsbin.com/obesa4
** Редактировать 2: ** Просмотреть все комментарии по всем ответам перед публикацией, поскольку в них больше информации.