鼠标的移入移出问题 e.relatedTarget

最新推荐文章于 2023-05-20 22:34:12 发布

weixin_30268071

最新推荐文章于 2023-05-20 22:34:12 发布

阅读量341

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fdszlzl/archive/2009/06/03/1495634.html

本文介绍了一个使用jQuery实现的鼠标悬停效果案例。当鼠标移至带有特定类名的元素上时，会显示一个绝对定位的弹出层。该案例利用了mouseover和mouseout事件，并通过e.relatedTarget判断鼠标是否离开到指定的弹出层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery封装 e.relatedTarget

在mouseover中相当于IE的event.fromElement，在mouseout中相当于IE的event.toElement

<a href="#" class="tip"> Test1 </a>
<a href="#" class="tip"> Test2 </a>
<a href="#" class="tip"> Test3 </a>
<div id="pop" class="test">
<br/>弹出层
<input size="12"/>
<a href="#">aaaaaa</a>
<br/>
</div>

$(function(){
$(".tip").hover(function(e){
  $("#pop").css({
      "position":"absolute",
      "top": $(this).offset().top+$(this).outerHeight() ,
      "left": $(this).offset().left
     }).show();
},function(e){
  if( $(e.relatedTarget).attr("id")!="pop"){    $("#pop").hide();
  }
});
$("#pop").bind("mouseleave",function(){
  $('#pop').hide();
});
})

转载于:https://www.cnblogs.com/fdszlzl/archive/2009/06/03/1495634.html