JS实现鼠标滑过显示边框的菜单效果
更新时间：2016年09月21日 14:52:12 作者：webdm
这篇文章主要介绍了JS实现鼠标滑过显示边框的菜单效果,涉及javascript响应鼠标事件动态修改页面元素的相关操作技巧,需要的朋友可以参考下
本文实例讲述了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切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
jQuery javascript获得网页的高度与宽度的实现代码
下面小编就为大家带来一篇jQuery javascript获得网页的高度与宽度的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-04-04
这篇文章主要介绍了使用js绘制几何图形教程，本文主要是教大家绘制圆、弧、扇形,需要的朋友可以参考下2015-01-01
写的htc的数据表格...2007-01-01
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
这篇文章主要介绍我对JavaScript原型和闭包系列理解(随手笔记6)的相关资料,需要的朋友可以参考下2015-12-12
这次项目中有一个功能，频繁使用switch语句，代码优化的时候，将其换成数组2012-02-02
这篇文章主要介绍了浅谈Javascript数组索引，都是个人的一些经验总结,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了element-ui的回调函数Events的用法，本文通过实例代码给大家介绍了change回调函数的使用方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
JS 中document.write()的用法和清空的原因浅析
这篇文章主要介绍了JS 中document.write()的用法和清空的原因浅析,需要的朋友可以参考下2017-12-12
深入理解javascript严格模式(Strict Mode)
Strict mode是JavaScript1.8.5引进的技术，但还没有浏览器确实可靠的实现了严格模式，所以使用时要小心并且多测试。Strict mode可以应用于整个脚本，也可以适合于单个函数。2014-11-11
解决的方法就是直接把网页保存下来然后删掉下面这段js代码，然后就可以正常用右键菜单,也可以通过设置浏览器的安全级别到最高级别来解决问题2013-01-01
最新评论