JS鼠标经过显示层代码 兼容火狐浏览器
<script type="text/javascript">
function showTip(e)
{
e = e||window.event;
var div1 = document.getElementById('div1'); //将要弹出的层
div1.style.display="block"; //div1初始状态是不可见的,设置可为可见
div1.style.left=e.clientX+10; //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
div1.style.top=e.clientY+5;
div1.style.position="absolute";
}
//关闭层div1的显示
function closeTip()
{
var div1 = document.getElementById('div1');
div1.style.display="none";
}
</script>
<style type="text/css">
<!--
#div1{
display:none;
background-color :#f6f7f7;
color:#333333;
font-size:12px;
line-height:18px;
border:1px solid #e1e3e2;
width:250;
height:50;
}
-->
</style>
<div id="div1">
这里显示内容
</div>
<table width="100%">
<tr>
<td onMouseMove="showTip()" onMouseOut="closeTip()"><a href="#" style="text-decoration:none;">点击链接显示新的层</a></td>
</tr>
</table> 展开
您好!很高兴为您答疑!
w<!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>兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现</title>
<style type="text/css">
#b_g_date tr{
event:expression(
onmouseover = function(){this.style.backgroundColor='#E3FFC9'},
onmouseout = function(){this.style.backgroundColor='#FFFFFF'});
}
#b_g_date tr:hover{ background:#E3FFC9;}
#b_g_date td{ height:20px;}
</style>
</head>
<body>
<table width="500" border="1" height="300" id="b_g_date">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。
推荐于2016-10-07 · 知道合伙人数码行家
知道合伙人数码行家
向TA提问 私信TA
JavaScript实现网页拖动层,按住鼠标拖动层,兼容火狐、chrome等浏览器。如演示页面所示,鼠标放在方块上,按住鼠标即可实现拖动,在chrome里有bug的,在onmousedown 函数里的最后加入了return false;解决了问题。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖动层</title>
<style>
#box{width:100px;height:100px;background:#966;position:absolute;left:100px;top:100px;cursor:pointer;}
</style>
</head>
因为火狐不支持 window.event,使用下面的替代:
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);
}
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。
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);
}