一个问题，很困惑。

直接上代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
*{margin:0; padding:0;}

.ol-float *{margin:0; padding:0;font-size:12px;}
.ol-float a {text-decoration:none;}
.ol-float a:hover {text-decoration:none;}
.ol-float {
position:absolute; top:100px; right:1px;
border:1px solid #F7A51A;
border-top-width:2px;
z-index:9999;
}
.ol-float-r {
position:relative;
width:0px; height:198px;
overflow:hidden;
}
.ol-float-close {
float:right;
margin:5px 2px 0 0;
padding:0 1px;
border:1px solid #fff;;
cursor:pointer; font-size:12px; color:#F7A51A; font-weight:bold;
}
.ol-float-close-hover {
border:1px solid #F7A51A;
}
.ol-float-head {
height:28px;
background:#eee;
}
.ol-float-bottom {
height:66px;
background:#eee;
}
.ol-float-con {
width:183px;
overflow:hidden; zoom:1;
}
.ol-float-con a {
float:left;
width:88px; height:24px; line-height:24px;
border:1px solid #fff;
border-bottom-color:#f7f7f7;
text-align:center; color:#000;
}
.ol-float-con a span {
margin-right:4px;
color:#ffbb69;
}
.ol-float-con a:hover {
color:red;
border:1px solid #fed9ab;
background:#fff9ec;
}
.ol-float-trigger {
position:absolute; left:-28px; top:-19px;
width:28px; height:103px;
background:#ddd;
cursor:pointer;
}
</style>
</head>
<body>
<div class="ol-float" id="ol-float">
<div class="ol-float-trigger" id="ol-float-trigger">
点<br/>击<br/>我
</div>
<div class="ol-float-r" id="ol-float-r">
<div class="ol-float-head">
<div class="ol-float-close" title="关闭" id="ol-float-close">×</div>
</div>
<div class="ol-float-con">
<a href="#"><span>回呼</span>咨询咨询</a>
<a href="#"><span>回呼</span>咨询咨询</a>
<a href="#"><span>回呼</span>咨询咨询</a>
<a href="#"><span>回呼</span>咨询咨询</a>
<a href="#"><span>回呼</span>咨询咨询</a>
<a href="#"><span>回呼</span>咨询咨询</a>
<a href="#"><span>回呼</span>咨询咨询</a>
<a href="#"><span>回呼</span>咨询咨询</a>
</div>
<div class="ol-float-bottom"></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$('#ol-float-trigger').click(function(){
$('#ol-float-r').width() ?
($('#ol-float-r').animate({
width: 0
})) :
($('#ol-float-r').animate({
width: '183px'
}));
return false;
})
$('#ol-float-close').click(function(){
$('#ol-float-r').animate({
width: 0
})
return false;
}).mouseover(function(){
$(this).addClass('ol-float-close-hover');
}).mouseout(function(){
$(this).removeClass('ol-float-close-hover');
})

// 这里不知道为什么明明没移出 #ol-float，方框却缩回去了。
$('#ol-float').mouseout(function(){
$('#ol-float-r').animate({
width: 0
})
})
</script>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

收回去说明移出了仔细想一下你的逻辑既然你有动画效果了你的鼠标确定还在#ol-float-close上吗?
$('#ol-float').mouseleave(function(){
                $('#ol-float-r').animate({
                    width: 0
                })
            })
大概看了下，我觉得应该是你的“点击我”的div（ol-float-trigger）位置不在ol-float这个div里面，所以出现问题
感觉是你的css有问题
ol-float-trigger这个div飘出了ol-float
见证奇迹的时刻到了
我加了一个背景色，然后就OK了。
不管你信不信奇迹，反正我是信了<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
            *{margin:0; padding:0;}

            .ol-float *{margin:0; padding:0;font-size:12px;}
            .ol-float a {text-decoration:none;}
            .ol-float a:hover {text-decoration:none;}
            .ol-float {
                position:absolute; top:100px; right:1px;
                border:1px solid #F7A51A;
                border-top-width:2px;
                z-index:9999;
            }
            .ol-float-r {
                position:relative;
                width:0px; height:198px;
                overflow:hidden;
background:#CCC;
            }
            .ol-float-close {
                float:right;
                margin:5px 2px 0 0;
                padding:0 1px;
                border:1px solid #fff;;
                cursor:pointer; font-size:12px; color:#F7A51A; font-weight:bold;
            }
            .ol-float-close-hover {
                border:1px solid #F7A51A;
            }
            .ol-float-head {
                height:28px;
                background:#eee;
            }
            .ol-float-bottom {
                height:66px;
                background:#eee;
            }
            .ol-float-con {
                width:183px;
                overflow:hidden; zoom:1;
            }
            .ol-float-con a {
                float:left;
                width:88px; height:24px; line-height:24px;
                border:1px solid #fff;
                border-bottom-color:#f7f7f7;
                text-align:center; color:#000;
            }
            .ol-float-con a span {
                margin-right:4px;
                color:#ffbb69;
            }
            .ol-float-con a:hover {
                color:red;
                border:1px solid #fed9ab;
                background:#fff9ec;
            }
            .ol-float-trigger {
                position:absolute; left:-28px; top:-19px;
                width:28px; height:103px;
                background:#ddd;
                cursor:pointer;
            }
        </style>
    </head>
    <body>
        <div class="ol-float" id="ol-float">
            <div class="ol-float-trigger" id="ol-float-trigger">
                点<br/>击<br/>我
            </div>
            <div class="ol-float-r" id="ol-float-r">
                <div class="ol-float-head">
                    <div class="ol-float-close" title="关闭" id="ol-float-close">×</div>
                </div>
                <div class="ol-float-con">
                    <a href="#"><span>回呼</span>咨询咨询</a>
                    <a href="#"><span>回呼</span>咨询咨询</a>
                    <a href="#"><span>回呼</span>咨询咨询</a>
                    <a href="#"><span>回呼</span>咨询咨询</a>
                    <a href="#"><span>回呼</span>咨询咨询</a>
                    <a href="#"><span>回呼</span>咨询咨询</a>
                    <a href="#"><span>回呼</span>咨询咨询</a>
                    <a href="#"><span>回呼</span>咨询咨询</a>
                </div>
                <div class="ol-float-bottom"></div>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $('#ol-float-trigger').click(function(){
                $('#ol-float-r').width() ?
                ($('#ol-float-r').animate({
                    width: 0
                })) :
                ($('#ol-float-r').animate({
                    width: '183px'
                }));
                return false;
            })
            $('#ol-float-close').click(function(){
                $('#ol-float-r').animate({
                    width: 0
                })
                return false;
            }).mouseover(function(){
                $(this).addClass('ol-float-close-hover');
            }).mouseout(function(){
                $(this).removeClass('ol-float-close-hover');
            })


            // 这里不知道为什么明明没移出 #ol-float，方框却缩回去了。
            $('#ol-float').mouseleave(function(){
                $('#ol-float-r').animate({
                    width: 0
                })
            })
        </script>
    </body>
</html>
是的，在ff下直接 mouseleave 效果可以，但是 ie6下需要加 background
如.ol-float {
background:#ccc;
position:absolute; top:100px; right:1px;
border:1px solid #F7A51A;
border-top-width:2px;
z-index:9999;
}
这就说明 ol-float 没触发 layerout
但把 background 换成 zoom 却不行，不知道为什么。。
其实Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。_zoom是CSS hack中专对IE6起作用的部分。IE6浏览器会执行zoom:1表示对象的缩放比例，但这里
overflow:hidden;和_zoom:1;是连起来用的，作用是清除border内部浮动。