jQuery: 仿select下拉框效果，点击空白关闭弹出层，判断是否被mouseover
1. 方法一
<!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=utf-8" /> <title>无标题文档</title> <script src="http://www.w3cschool.cn/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".btn").click(function(e){ e.stopPropagation(); $("#box").show(); }); $("#box").click(function(e){ e.stopPropagation(); }); document.onclick = function(){ $("#box").hide(); }; }) </script> <style> #box {width:300px;height:200px;border:1px solid #000;display:none} </style> </head> <body> <div id="box"></div> <span class="btn">显示层</span> </body> </html> 2. 方法二
<!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=utf-8" /> <title>无标题文档</title> <script src="http://www.w3cschool.cn/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".btn").click(function(){ $("#box").show(); return false; }); $("#box").click(function(){ return false; }); document.onclick = function(){ $("#box").hide(); }; }) </script> <style> #box {width:300px;height:200px;border:1px solid #000;display:none} </style> </head> <body> <div id="box"></div> <span class="btn">显示层</span> </body> </html> 来源： http://bbs.blueidea.com/forum.php?mod=viewthread&tid=3056515&page=1#pid5427170
3. 判断元素是否被mouseover
$('#test').click(function() { if ($('#hello').is(':hover')) { alert('hello'); } }); 或者
if ($('#element:hover').length != 0) { // do something ;) } 来源： http://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery
justcode.ikeepstudying.com
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
