脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS鼠标滑过显示边框

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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • js实现点击图片自动提交action的简单方法

    js实现点击图片自动提交action的简单方法

    下面小编就为大家带来一篇js实现点击图片自动提交action的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 利用Javascript获取选择文本所在的句子详解

    利用Javascript获取选择文本所在的句子详解

    这篇文章主要给大家爱介绍了关于利用Javascript获取选择文本所在的句子的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧。
    2017-12-12
  • js获取腾讯视频ID的方法

    js获取腾讯视频ID的方法

    这篇文章主要介绍了js获取腾讯视频ID的方法,涉及JavaScript针对URL地址规则的分析与字符串的截取操作相关操作技巧,需要的朋友可以参考下
    2016-10-10
  • JavaScript实现点击出现子菜单效果

    JavaScript实现点击出现子菜单效果

    这篇文章主要为大家详细介绍了JavaScript实现点击出现子菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-02-02
  • 微信小程序实现长按删除图片的示例

    微信小程序实现长按删除图片的示例

    本篇文章主要介绍了微信小程序实现长按删除图片的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Bootstrap分页插件之Bootstrap Paginator实例详解

    Bootstrap分页插件之Bootstrap Paginator实例详解

    Bootstrap Paginator是一款基于Bootstrap的js分页插件，功能很丰富，个人觉得这款插件已经无可挑剔了，感兴趣的朋友跟着脚本之家小编一起学习吧
    2016-10-10
  • 学习LayUI时自研的表单参数校验框架案例分析

    学习LayUI时自研的表单参数校验框架案例分析

    本框架基于LayUI框架写的表单参数校验框架，本文分过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
    2019-07-07
  • 网站页面自动跳转实现方法PHP、JSP（上）

    网站页面自动跳转实现方法PHP、JSP（上）

    自动转向，也叫自动重定向。自动跳转，指当访问用户登陆到某网站时，自动将用户转向其它网页地址的一种技术。转向的网页地址可以是网站内的其它网页，也可以是其它网站。
    2010-08-08
  • js创建对象的方式总结

    js创建对象的方式总结

    这篇文章主要介绍了js创建对象的方式,实例总结了3种常用的创建对象的方式,非常实用,需要的朋友可以参考下
    2015-01-01
  • JavaScript/TypeScript 实现并发请求控制的示例代码

    JavaScript/TypeScript 实现并发请求控制的示例代码

    这篇文章主要介绍了JavaScript/TypeScript 实现并发请求控制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01

最新评论