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 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
jquery插件validate验证的小例子
May 08 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
Javascript自定义事件详解
Jan 13 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
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
You might like
PHP-MySQL教程归纳总结
2008/06/07 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
报社实习生自荐信
2014/01/24 职场文书
大学军训感言400字
2014/03/11 职场文书
同意迁入证明模板
2014/10/26 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
佛光寺导游词
2015/02/10 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
Python编程super应用场景及示例解析
2021/10/05 Python