jquery新手问题3


<html>
<head>
    <title></title>
    <style type="text/css">
        body {padding:40px;margin:0;}
        /* detail */
        #detail {position:absolute;display:none;}
    </style>
    
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(function() {
            $("img.detailable").mouseover(function(e) {
                var detail = "<div id='detail'><img src='"
                            + this.src
                            + "' alt=''></img></div>";
                $("body").append(detail);
                $("#detail").css({ "top": e.pageY + "px", "left": e.pageX + "px" }).show();
                //alert(detail);
            }).mouseout(function(e) {
                $("#detail").remove();
                //alert('');
            }).mousemove(function(e) {
                $("#detail").css({ "top": e.pageY + "px", "left": e.pageX + "px" });
            });        });
    </script>
</head>
<body>
    <img class="detailable" src="img/apple_1.jpg" alt=""  />
</body>
</html>效果：鼠标移入图片时在弹出层中显示自身，移出后消失。
但是测试下来并没有达到预期的效果。
在FF3.5下会出现弹出层反复闪烁的现象。
在IE8下移入图片后有时不能正常显示弹出层。在mouseout方法中添加alert()测试发现：当鼠标移入图片后也会触发mouseout事件。
这应当是造成FF3.5下弹出层反复闪烁的原因。这到底是怎么回事？