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

2019-11-20 08:55:10

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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.srcElementelse if (document.getElementById)source3=e.targetif (source3.className=="menulines"){borderize(source3,"black")}else{while(source3.tagName!="TABLE"){source3=document.getElementById? source3.parentNode : source3.parentElementif (source3.className=="menulines")borderize(source3,"black")}}}function borderize_off(e){if (document.all)source4=event.srcElementelse if (document.getElementById)source4=e.targetif (source4.className=="menulines")borderize(source4,"white")else{while(source4.tagName!="TABLE"){source4=document.getElementById? source4.parentNode : source4.parentElementif (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程序设计有所帮助。

上一篇：Angular2 环境配置详细介绍

下一篇：JS 动态判断PC和手机浏览器实现代码