判断鼠标是否落在指定元素上

   点击图片在图片下方动态显示一个div。然后当我的div离开图片时（删除这个隐藏的div前先判断鼠标没有落在显示出来的div上，如果有就不删除显示出来的div ，如果没有就直接删除显示出来的div）。
   现在面临的问题是：
           /*这段是鼠标放到图片上显示div ，否则就不显示 */
          $("#aa"+id).hover( function() {
$("#mm"+id).show();
  }, function() {
               /*我想在这里先判断鼠标没有落在显示出来的div上，
                *如果有就不删除显示出来的div ，如果没有就直接删除显示出来的div */ // $("#mm"+id).hide();   });
  $("#mm"+id).hover( function() {
$("#mm"+id).show();
  }, function() {
$("#mm"+id).remove();
  });有哪位大侠能帮忙解决的定当奖赏。（要兼容IE、火狐、谷歌浏览器的）谢谢了。

解决方案 »

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

写了一个简单的测试画面看看能不能有所帮助。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<title>Untitled</title>
<style type="text/css">
div{padding:3px;}
img{width:200px;height:140px;border:0px;}
#detail{width:200px;height:100px;border:1px solid #ccc;display:none;}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head><body><div >
<img src="apple.jpeg"></img>
<div id="detail">I'm an apple!</div>
</div><script language="javascript">
var speed = 200;             // div显示速度
$('img').bind('click', function(){
var detail = $('#detail'), _this = this;
// 图片未显示则显示，已显示则不操作
if (detail.css('display') == 'none') {
detail.show(speed);
// 显示div并且给document绑定一个mouseover事件，监听鼠标移动事件。
$(document).bind('mouseover', function(e) {
var targ = e.target;
if (targ.nodeType == 3) targ = targ.parentNode  // Safari
var set = detail.offset();
// 鼠标进入图片与div之间的间隙默认不隐藏，不然鼠标不能进入div区域。
var inArea = e.clientX > set.left
&& e.clientX < (set.left + Number(detail.css('width').replace('px', '')))
&& e.clientY < set.top;
// 鼠标在图片，div，图片与div之间的间隙时显示div，否则隐藏。
if (targ != _this && !inArea && targ.id != 'detail') {
detail.hide(speed);
// 隐藏div并且取消document的mouseover监听。
$(document).unbind('mouseover');
}
});
}
else return false;
});
</script>
</body>
</html>
    $(function () {
        $("#aa" + id).hover(function () {
            $("#mm" + id).show().mouseover(function () { clearTimeout(window.timer); }).mouseout(function () { $(this).hide(); });
        }, function (e) {
            window.timer = setTimeout(function () { $("#mm" + id).hide(); }, 200); //延时隐藏，以便鼠标移动到div上时clear掉计时器
        });
    });
提供一个实现了相同效果的办法，也许帮不到你，仅供开阔思路:)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
    <title>Untitled</title>
    <style type="text/css">
    div{padding:3px;}
    img{width:200px;height:140px;border:0px;}
    #nav{width:115px;padding-top:115px;background: url(w_meinv.jpg) no-repeat;}
    #detail{width:200px;height:100px;border:1px solid #ccc;display:none;}
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head><body><div >
<div id="nav">
    <div id="detail">I'm an apple!</div>
</div></div><script language="javascript">
    var detail = $('#detail');
    $('#nav').hover(function(){
        detail.show();
    },function(){
        detail.hide();
    });
</script>
</body>
</html>
另一种实现思路（没有破坏你的结构）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
    <title>Untitled</title>
    <style type="text/css">
    div{padding:3px;}
    img{width:200px;height:140px;border:0px;}
    #detail{width:200px;height:100px;border:1px solid #ccc;display:none;}
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head><body><div >
<img src="w_meinv.jpg"></img>
<div id="detail">I'm an apple!</div>
</div><script language="javascript">
    var detail = $('#detail');
    $('img').hover(function(){
        detail.show();
    },function(){
        detail.hide();
    });
    detail.hover(function(){
        $(this).show();
    }, function(){
        $(this).hide();
    });
</script>
</body>
</html>
2L已经写了不多说了
你用框架的话兼容性都给你做好了你直接可以用
正常的先判断浏览器类型然后添加mouseover/mouseout两个事件不难的仔细想想吧
更新了一下代码，加入了多个图片的提示，加入了DIV阴影提示，DIV提示框显示在图片的正下方距3px的位置。不能用5楼的hover方法。因为用hover只要鼠标离开图片DIV就会自动隐藏，也就是说鼠标无法到达DIV区域，除非图片与DIV有一小部分重叠.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
    <title>Untitled</title>
    <style type="text/css">
    div{padding:3px;}
    img{width:200px;height:140px;border:0px;float:left;}
#detail{position:absolute;width:200px;height:80px;display:none;}
.shadow {float:left;background:#000; margin:-5px -6px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.30');}
.frame {position:relative;background:#fff; padding:10px; display:block;
left:4px; top:4px;width:200px;height:80px;
   -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
   -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
</style>    <script type="text/javascript" src="jquery-1.4.2.js"></script>
</head><body><div id="showArea">
<img src="image/iphone3.jpg" alt="iphone3"></img>
<img src="image/iphone4.jpg" alt="ipPhone4"></img>
<img src="image/iphone4s.jpg" alt="iphone4s"></img>
<img src="image/iphone5.jpg" alt="iphone5"></img>
</div>
<div id="detail">
<div class="shadow"><div class="frame"></div></div>
<div><script language="javascript">
    var speed = 200;             // div显示速度
    $('#showArea>img').bind('click', function(){
        var detail = $('#detail'), _this = this;
        // 图片未显示则显示，已显示则不操作
        if (detail.css('display') == 'none') {
var _set = $(_this).offset();
// 设置DIV显示在图片正下方3px位置，可以根据实际情况改变位置.
detail.css({top: _set.top + Number($(_this).css('height').replace('px', '')) + 3, left:_set.left}).show(speed);
$('.shadow>.frame', detail).html('this\'s ' + $(_this).attr('alt'));
            // 显示div并且给document绑定一个mouseover事件，监听鼠标移动事件。
            $(document).bind('mouseover', function(e) {
                var targ = e.target||e.srcElement;              // Firefox,IE,Chrome
                if (targ.nodeType == 3) targ = targ.parentNode  // Safari
                var set = detail.offset();
                // 鼠标进入图片与div之间的间隙默认不隐藏，不然鼠标不能进入div区域。
                var inArea = e.clientX > set.left
                    && e.clientX < (set.left + Number(detail.css('width').replace('px', '')))
                    && e.clientY < set.top;
                // 鼠标在图片，div，图片与div之间的间隙时显示div，否则隐藏。
                if (targ != _this && !inArea && targ.id != 'detail' && targ.className != 'shadow' && targ.className != 'frame') {
                    detail.hide(speed);
                    // 隐藏div并且取消document的mouseover监听。
                    $(document).unbind('mouseover');
                }
            });
        }
        else return false;
    });
</script>
</body>
</html>
我觉这个真好，应用你写的这个代码却有个很奇怪的问题百思不得其解！
如下代码，当鼠标移到2 ul就隐藏了，移到1正常显示。
<ul class='t'>
  <li>1</li>
  <li>2</li>
</ul>折腾了1个多小时，改css、html，硬是搞不定！   后来将mouseover和mouserout 换为hover就可以了！什么原因呢？