编程 Javascript

javascript轻松实现当鼠标移开时已弹出子菜单自动消失

Posted in Javascript onDecember 29, 2013

<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);" class="menu">杂志技术站点</td> 
<td ID="d2" onmouseover="show(this,ds2);" class="menu">门户站点</td> 
<td ID="d3" onmouseover="show(this,ds3);" class="menu">个人收藏站点</td> 
</tr> 
</table> 
<DIV ID="ds1" CLASS="submenu" STYLE="display:none" 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" CLASS="submenu" STYLE="display:none" 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" CLASS="submenu" STYLE="display:none" 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 相关文章推荐

JS 动态获取节点代码innerHTML分析 [IE,FF]

Nov 30 Javascript

javascript实现倒计时并弹窗提示特效

Jun 05 Javascript

js 获取站点应用名的简单实例

Aug 18 Javascript

标准的js无缝滚动效果

Aug 30 Javascript

深入理解AngularJS中的ng-bind-html指令

Mar 27 Javascript

详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用

Aug 23 Javascript

Bootstrap Tooltip显示换行和左对齐的解决方案

Oct 11 Javascript

vue权限路由实现的方法示例总结

Jul 29 Javascript

js Math数学简单使用操作示例

Mar 13 Javascript

详解JavaScript作用域闭包

Jul 29 Javascript

一文帮你理解PReact10.5.13源码

Apr 03 Javascript

vue.js Router中嵌套路由的实用示例

Jun 27 Vue.js

css3元素简单的闪烁效果实现(html5 jquery)

Dec 28 #Javascript

js动态调用css属性的小规律及实例说明

Dec 28 #Javascript

JQuery的$命名冲突详细解析

Dec 28 #Javascript

js中call与apply的用法小结

Dec 28 #Javascript

SinaEditor使用方法详解

Dec 28 #Javascript

Jqgrid表格随窗口大小改变而改变的简单实例

Dec 28 #Javascript

jqGrid随窗口大小变化自适应大小的示例代码

Dec 28 #Javascript