<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <div id="container" style="width:300px;"> <div id="title" style="cursor:pointer; background:#ccc;">使用了mouseout事件↓</div> <div id="list" style="display:none;position:absolute; border:1px solid #ccc; width:300px;"> <div>第一行</div> <div>第二行</div> <div>第三行</div> </div> </div> <script type="text/javascript"> $(function(){ // 绑定鼠标移入标题时，显示下拉容器 var list = $("#list"); $("#title").mouseover(function() { var offset = $(this).offset(); list.css("left", offset.left); list.css("top", offset.top+19); list.show(); }); // 绑定mouseout事件，无法实现我们的预期效果 $("#container").mouseout(function() { $("#list").hide(); }); }); </script>

Tips:您可以在运行代码前对其进行修改！