鼠标经过时候打开，移动开以后DIV自动隐藏

最新推荐文章于 2020-12-30 14:57:08 发布

piperzero

最新推荐文章于 2020-12-30 14:57:08 发布

阅读量1.3k

点赞数

分类专栏：网站建设文章标签： div class javascript function timer html

网站建设专栏收录该内容

740 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的简单表格操作案例，通过鼠标悬停在表格行上显示修改选项。该案例展示了如何利用JavaScript为表格行添加交互效果，并在鼠标移入时显示隐藏的操作按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.corange.cn/archives/2008/09/1584.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>管理</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=javascript type=text/javascript>
var timer;
function c(obj,index){
var x = document.getElementById('m:' + index);
x.style.display = 'block';//alert(index);
obj.onmouseout=function(){timer=setTimeout(function(){x.style.display = 'none';},30)}
x.onmousemove =function(){clearTimeout(timer)}
x.onmouseout=function(){x.style.display = 'none';}

}

</SCRIPT>
<META content="MSHTML 6.00.2900.3395" name=GENERATOR></HEAD>
<BODY>
<TABLE class=table cellSpacing=0 cellPadding=0 width=730 border=0>
<TBODY>
<TR>
<TD width=38 bgColor=#daf0ff height=30></TD>
<TD vAlign=center align=middle width=114 bgColor=#daf0ff>ID</TD>
<TD vAlign=center align=middle width=180 bgColor=#daf0ff>名称</TD>
<TD vAlign=center align=middle width=71 bgColor=#daf0ff>　</TD>
<TD vAlign=center align=middle width=72 bgColor=#daf0ff>　</TD>
<TD vAlign=center align=middle width=84 bgColor=#daf0ff>　</TD>
<TD vAlign=center align=middle width=78 bgColor=#daf0ff>　</TD>
<TD vAlign=center align=middle width=93 bgColor=#daf0ff>　</TD></TR>
<TR onmousemove=c(this,0);>
<TD height=38 align=middle vAlign=center bgcolor="#00CCFF" class=b1>　</TD>
<TD height=38 align=middle vAlign=center bgcolor="#00CCFF" class=b1>1</TD>
<TD height=38 align=middle vAlign=center bgcolor="#00CCFF" class=b1>1 </TD>
<TD height=38 align=middle vAlign=center bgcolor="#00CCFF" class=b1>　</TD>
<TD height=38 align=middle vAlign=center bgcolor="#00CCFF" class=b1>　</TD>
<TD height=38 align=middle vAlign=center bgcolor="#00CCFF" class=b1>　</TD>
<TD height=38 align=middle vAlign=center bgcolor="#00CCFF" class=b1>　</TD>
<TD height=38 align=middle vAlign=center bgcolor="#00CCFF" class=b1>　</TD>
</TR>
<TR id=m:0>
<TD class=label3 colSpan=8 height=38>
<DIV class=b2 style="background-color:#FF0000">修改</DIV></TD></TR>
<SCRIPT language=javascript type=text/javascript>
document.getElementById('m:0').style.display = 'none';
</SCRIPT>
<TR onmousemove=c(this,1);>
<TD height=38 align=middle vAlign=center bgcolor="#0099FF" class=b1>　</TD>
<TD height=38 align=middle vAlign=center bgcolor="#0099FF" class=b1>2</TD>
<TD height=38 align=middle vAlign=center bgcolor="#0099FF" class=b1>2</TD>
<TD height=38 align=middle vAlign=center bgcolor="#0099FF" class=b1>　</TD>
<TD height=38 align=middle vAlign=center bgcolor="#0099FF" class=b1>　</TD>
<TD height=38 align=middle vAlign=center bgcolor="#0099FF" class=b1>　</TD>
<TD height=38 align=middle vAlign=center bgcolor="#0099FF" class=b1>　</TD>
<TD height=38 align=middle vAlign=center bgcolor="#0099FF" class=b1>　</TD>
</TR>
<TR id=m:1>
<TD class=label3 colSpan=8 height=38>
<DIV class=b2 style="background-color:#FF0000">修改</DIV></TD></TR>
<SCRIPT language=javascript type=text/javascript>
document.getElementById('m:1').style.display = 'none';
</SCRIPT>
<TR onmousemove=c(this,2);>
<TD height=38 align=middle vAlign=center bgcolor="#33FFFF" class=b1>　</TD>
<TD height=38 align=middle vAlign=center bgcolor="#33FFFF" class=b1>3</TD>
<TD height=38 align=middle vAlign=center bgcolor="#33FFFF" class=b1>3</TD>
<TD height=38 align=middle vAlign=center bgcolor="#33FFFF" class=b1>　</TD>
<TD height=38 align=middle vAlign=center bgcolor="#33FFFF" class=b1>　</TD>
<TD height=38 align=middle vAlign=center bgcolor="#33FFFF" class=b1>　</TD>
<TD height=38 align=middle vAlign=center bgcolor="#33FFFF" class=b1>　</TD>
<TD height=38 align=middle vAlign=center bgcolor="#33FFFF" class=b1>　</TD>
</TR>
<TR id=m:2>
<TD class=label3 colSpan=8 height=38>
<DIV class=b2 style="background-color:#FF0000">修改</DIV></TD>
</TR>
<SCRIPT language=javascript type=text/javascript>
document.getElementById('m:2').style.display = 'none';
</SCRIPT>
</TBODY></TABLE>
</BODY></HTML>