Move active element loses mouseout event in Internet Explorer

The problem is that IE handles mouseover differently, because it behaves like mouseenter and mousemove combined on an element. In other browsers it's just mouseenter.

So even after your mouse has entered the target element and you've changed it's look and reappended it to it's parent mouseover will still fire for every movement of the mouse, the element gets reappended again, which prevents other event handlers from being called.

The solution is to emulate the correct mouseover behavior so that actions in onmouseover are executed only once.

$("li").mouseover( function() {
    // make sure these actions are executed only once
    if ( this.style.borderColor != "red" ) {
        this.style.borderColor = "red";
        this.parentNode.appendChild(this);
    }
});

Examples

1. Extented demo of yours
2. Example demonstrating the mouseover difference between browsers (bonus: native javascript)

I was able to get it working with nested divs and a mouseenter event on the parent:

<div id="frame">
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>
...
$('#frame').mouseenter(function() {
     $(".box").css("border-color", "black");
});

Here's a working version using Raphael:

http://jsfiddle.net/xDREx/