基于jquery鼠标点击其它地方隐藏层的实例代码

更新时间：2011年01月23日 21:22:58 作者：

基于jquery鼠标点击其它地方隐藏层的实例代码，需要的朋友可以参考下。

效果图:

下面的代码运行后，需要再刷新一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>test</title> <style type="text/css"> .div_d{ padding:10px; border:1px dotted red; position:absolute; display:none; cursor:pointer;} </style> <script src="http://demo.jb51.net/jslib/jquery/jquery.js"></script> <script type="text/javascript"> $(function(){ $("input[id=search]").focus(function(even){ var pos=$(this).offset(); $(".div_d").css({left:pos.left,top:pos.top+20+"px",display:"block"}); }); document.onclick=function(e){ var e=e?e:window.event; var tar = e.srcElement||e.target; if(tar.id!="search"){ if($(tar).attr("class")=="div_d"){ $(".div_d").css("display","block") }else{ $(".div_d").css("display","none"); } } } }) </script> </head> <body style=" padding-left:300px;"> <input id="search" /> <div class="div_d"> <a href="https://www.jb51.net" target="_blank">脚本之家</a>介绍信息</div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

jQuery代码优化选择符篇
毫无疑问，jQuery的独到之处就是它以集合为中心的操作。为了取得DOM对象集合，jQuery利用JavaScript不仅实现了（它诞生时）很多浏览器不支持的CSS选择符，还实现了不少独到的自定义选择符，为在文档中查找元素提供了极大的便利
2011-11-11
JQuery 图片滚动轮播示例代码
这篇文章主要介绍了JQuery实现图片滚动轮播,需要的朋友可以参考下
2014-03-03
jQuery操作表格（table）的常用方法、技巧汇总
虽然现在DIV+CSS进行页的布局大行其道，但是很多地方使用table还是有很多优势，用table展示数据是比较方便的，下面汇总了jQuery操作Table tr td常用的方法，熟记这些操作技巧，下次再使用的到时候，会让你如鱼得水，提高开发效率
2014-04-04
jQuery选择器源码解读（一）：Sizzle方法
这篇文章主要介绍了jQuery选择器源码解读（一）：Sizzle方法,本文用详细的注释解读了Sizzle方法的实现源码,需要的朋友可以参考下
2015-03-03
jQuery实现带动画效果的多级下拉菜单代码
这篇文章主要介绍了jQuery实现带动画效果的多级下拉菜单代码,可实现点击渐隐渐显效果,涉及jQuery页面元素的遍历及链式操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
jQuery :first选择器使用介绍
:first：获取第一个元素，在一些特殊情况下还是蛮实用的，下面为大家详细介绍下:first的具体使用，感兴趣的朋友可以参考下
2013-08-08
jquery密码强度校验
这篇文章主要介绍了jquery密码强度校验，这是一个非常常见的功能，在输入密码的时候提示密码的强度，本文使用jQuery来实现，有需要的小伙伴可以参考下。
2015-12-12
jQuery实现鼠标移到元素上动态提示消息框效果
当光标移动到某些元素上时，会弹出像tips的提示框，这种效果想必大家都有见到过吧，下面有个不错的示例，大家可以感受下
2013-10-10
解析jQuery与其它js(Prototype)库兼容共存
解决jQuery与其它js(Prototype)库冲突的方法很简单，就是使用jQuery的jQuery.noConflict()函数，以下小编就为大家介绍，需要的朋友可以参考下
2013-07-07
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的jQuery代码
2010-03-03