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