直接上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>
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-12-15 04:00:26