JS实现鼠标滑过显示边框的菜单效果


Posted in Javascript onSeptember 21, 2016

本文实例讲述了JS实现鼠标滑过显示边框的菜单效果。分享给大家供大家参考,具体如下:

<html>
<head>
<title>JS鼠标滑过显示边框菜单</title>
</head>
<body>
<style>
.menulines{
border:1px solid white;
}
.menulines a{
text-decoration:none;
color:red;
}
</style>
<script language="JavaScript1.2">
function borderize(what,color){
what.style.borderColor=color
}
function borderize_on(e){
if (document.all)
source3=event.srcElement
else if (document.getElementById)
source3=e.target
if (source3.className=="menulines"){
borderize(source3,"black")
}
else{
while(source3.tagName!="TABLE"){
source3=document.getElementById? source3.parentNode : source3.parentElement
if (source3.className=="menulines")
borderize(source3,"black")
}
}
}
function borderize_off(e){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menulines")
borderize(source4,"white")
else{
while(source4.tagName!="TABLE"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menulines")
borderize(source4,"white")
}
}
}
</script>
<table border="0" width="150" cellspacing="0" cellpadding="0" onMouseover="borderize_on(event)" onMouseout="borderize_off(event)" height="95">
<tr><td width="100%" bgcolor="#E6E6E6" height="13"><b><font size="2">导航菜单</font></b></td></tr>
<tr><td width="100%" class="menulines" height="14"><a href="#">网页特效</a></td></tr>
<tr><td width="100%" class="menulines" height="14"><a href="#">学习教程</a></td></tr>
<tr><td width="100%" class="menulines" height="14"><a href="#">网页素材</a></td></tr>
<tr><td width="100%" class="menulines" height="14"><a href="#">软件下载</a></td></tr>
<tr><td width="100%" class="menulines" height="14"><a href="#">平面设计</a></td></tr>
</table>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
javascript实现unicode和字符的互相转换
Jul 18 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
学习vue.js计算属性
Dec 03 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 #Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 #Javascript
AngularJS通过$http和服务器通信详解
Sep 21 #Javascript
JavaScript 拖拽实例代码
Sep 21 #Javascript
Angularjs中controller的三种写法分享
Sep 21 #Javascript
jQuery中Find选择器用法示例
Sep 21 #Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 #Javascript
You might like
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
任意位置显示html菜单
2007/02/01 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
javascript实现下雨效果
2017/03/27 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Python-split()函数实例用法讲解
2020/12/18 Python
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
自荐信不宜过于夸大
2013/11/06 职场文书
优秀毕业生求职推荐信范文
2013/11/21 职场文书
广告学毕业生求职信
2014/01/30 职场文书
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫