手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript轻松实现当鼠标移开时已弹出子菜单自动消失
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
摘要:复制代码代码如下:.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实现智能右键菜单

JavaScript检测鼠标移动方向的方法

javascript实现在网页任意处点左键弹出隐藏菜单的方法

javascript实现淡蓝色的鼠标拖动选择框实例

js实现鼠标移到链接文字弹出一个提示层的方法

javascript转换静态图片,增加粒子动画效果

JavaScript实现带标题的图片轮播特效

javascript实现图片跟随鼠标移动效果的方法

javascript实现行拖动的方法

javascript实现简单的进度条

精品推荐
分类导航