javascript轻松实现当鼠标移开时已弹出子菜单自动消失
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:.menu{background-color:green;width:120;height:20;color:white;...

复制代码 代码如下:

<html>

<head>

<style type="text/css">

.menu

{

background-color:green;

width:120;

height:20;

color: white;

text-align: center;

font-size:9pt;

font-weight:bolder;

}

.submenu

{

position:absolute;

top:40;

background-color:

yellow;width:180;

font-size:9pt;

}

</style>

</head>

<body>

<SCRIPT>

var cm=null;

document.onclick = new Function("show(null)")

function getPos(el,sprop)

{var iPos = 0

while (el!=null)

{iPos+=el["offset" + sprop]

el = el.offsetParent}

return iPos}

function show(el,m)

{if (m) { m.style.display='';

m.style.pixelLeft = getPos(el,"Left")

m.style.pixelTop = getPos(el,"Top") + el.offsetHeight}

if ((m!=cm) && (cm)) cm.style.display='none';cm=m}

</SCRIPT>

<table border=0>

<tr>

<td ID="d1" onmouseover="show(this,ds1);">杂志技术站点</td>

<td ID="d2" onmouseover="show(this,ds2);">门户站点</td>

<td ID="d3" onmouseover="show(this,ds3);">个人收藏站点</td>

</tr>

</table>

<DIV ID="ds1" onmouseleave="this.style.display='none'">

<BR><A HREF="http://www.yesky.com">天极网 Yesky.com</A>

<BR><A HREF="http://www.cbinews.com">电脑商情报</A>

<BR><A HREF="http://www.newsoft.com.cn">新潮电子</A>

<BR>

</DIV>

<DIV ID="ds2" onmouseleave="this.style.display='none'">

<BR><A HREF="http://www.sina.com.cn">新浪网 Sina</A>

<BR><A HREF="http://www.sohu.com.cn">搜狐 Sohu</A>

<BR><A HREF="http://www.163.com">网易 Netease</A>

<BR>

</DIV>

<DIV ID="ds3" onmouseleave="this.style.display='none'">

<BR><A HREF="http://haoel.yeah.net">耗子网络编程站</A>

<BR><A HREF="http://www.5460.net">中国同学录</A>

<BR><A HREF="http://www.csdn.net">中国软件开发网</A>

<BR>

</DIV>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类