直接上DEMO,不过IE中会提示加载ActiveX控件!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>CSSJS弹出层效果,兼容所有浏览器</title> <script src="http://www.chinahbnet.com/Scripts/Common/jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> function show(obj,id) { var objDiv = $("#"+id+""); if(navigator.userAgent.indexOf("Firefox") > 0) { var $E = function() {var c = $E.caller; while(c.caller) c = c.caller; return c.arguments[0]}; __defineGetter__("event", $E); } $(objDiv).css("display","block"); $(objDiv).css("left", event.clientX); $(objDiv).css("top", event.clientY + 10); } function hide(obj,id) { var objDiv = $("#"+id+""); $(objDiv).css("display", "none"); } </script> <style type="text/css"> .show_div{ position:absolute;display:none;border:1px solid silver;background:silver; } </style> </head> <body> <div id="mydiv1" class="show_div"> 提示1效果 </div> <div id="mydiv2" class="show_div"> 提示2效果 </div> <a id="t1" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">鼠标放上去1</a> <br><br><br><br><br> <a id="t2" onMouseOver="javascript:show(this,'mydiv2');" onMouseOut="hide(this,'mydiv2')">鼠标放上去2</a> </body> </html>
版权声明:本文为博主原创文章,未经博主允许不得转载。
原文地址:http://blog.csdn.net/ybb350680013/article/details/47723115