使用脚本(JavaScript)实现鼠标通过(onMouseOver)/离开(onMouseOut)文本、图片、表格时的特殊效果_

[会员中心] [发布文章][发布软件] [中文繁體]

本站搜索

推荐文章 More...

	华硕易电脑(ASUS Eee PC 10.. 先来段开场白：为了外出携带方便，..

	Acronis True Image 使用.. 　　一款可以在Windows下使用全..

	Norton Ghost 使用详解一、分区备份　　使用Ghost进..

文章阅读排行

	“啊估文章软件站”网站系.. 一、调试测试网站系统时，如何设..

	Norton Ghost 使用详解一、分区备份　　使用Ghost进..

	电脑显示器使用 HDMI 数据.. 如果电脑显示器使用 HDMI 数据线..

	ASP：Persits ASPMail 发送.. 【发送邮件测试代码下载】压..

	CMD：列出当前文件夹的全部.. 电脑硬盘里，某个文件夹里的文件..

	hao123 联盟成立脱离百度.. 　　百度联盟7月4日发布公告，自20..

文章信息

使用脚本(JavaScript)实现鼠标通过(onMouseOver)/离开(onMouseOut)文本、图片、表格时的特殊效果

〖评论()〗〖留言〗〖收藏〗

〖文章分类：电脑·手机·网络 / HTML·CSS·JavaScript〗〖阅读选项〗

文本测试：
 
 
文本测试：鼠标通过时，文本改变颜色，离开后恢复原来的颜色
 
 
<font face="宋体" size="3" color="#008000" onMouseOver="JavaScript:this.style.color='#FF0000';this.style.textDecoration='underline';" onMouseOut="JavaScript:this.style.color='#0000FF';this.style.textDecoration='none';">文本测试：鼠标通过时，文本改变颜色并显示下划线，第一次离开后又改变成另外一种颜色
 
 
文本测试：鼠标通过时，文本背景改变颜色，离开后恢复原来的颜色
 
 
<font face="宋体" size="3" color="#008000" onMouseOver="JavaScript:this.style.backgroundColor='#FF0000';this.style.textDecoration='underline';" onMouseOut="JavaScript:this.style.backgroundColor='#0000FF';this.style.textDecoration='none';">文本测试：鼠标通过时，文本背景改变颜色并显示下划线，第一次离开后又改变成另外一种颜色
 
 
 
图片测试
 
 
图片载入时比较模糊，当鼠标通过时变得清晰，离开后又恢复原来的样子（opacity 后面的数字是调节清晰度的，要多少清晰度自己修改）
 
<img src="/Upload/200808/200809080001.jpg" border="0" style="filter:alpha(opacity=40);" onMouseOver="JavaScript:this.filters.alpha.opacity='100';" onMouseOut="JavaScript:this.filters.alpha.opacity='40';">
 
 
 
表格测试
 
 

<table border="1" width="500" height="10">
<tr bgcolor="#FFFFFF" onMouseOver="JavaScript:this.style.backgroundColor='#FF0000';" onMouseOut="JavaScript:this.style.backgroundColor='';">
<td height="30" width="490">当鼠标通过这一行时，背景颜色改变，离开时又恢复原来的颜色</td>
</tr>
<tr>
<td height="30" width="490"></td>
</tr>
</table>
注：onMouseOver="JavaScript:this.style.backgroundColor='#FF0000';" 这一句是鼠标通过时行背景要显示的颜色，#FF0000 这是十六进制的颜色代码，可以自行修改；onMouseOut="JavaScript:this.style.backgroundColor='';" 这一句是鼠标离开时行背景要显示的颜色，这里颜色代码留空，表示恢复行原来的背景颜色。

<html> 
<head> 
<title>使用脚本(JavaScript)实现鼠标通过(onMouseOver)/离开(onMouseOut)文本、图片、表格时的特殊效果__当百网</title> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"> 
</head> 
 
<body> 
 
文本测试： 
 
 
文本测试：鼠标通过时，文本改变颜色，离开后恢复原来的颜色 
 
 
<font face="宋体" size="3" color="#008000" onMouseOver="JavaScript:this.style.color='#FF0000';this.style.textDecoration='underline';" onMouseOut="JavaScript:this.style.color='#0000FF';this.style.textDecoration='none';">文本测试：鼠标通过时，文本改变颜色并显示下划线，第一次离开后又改变成另外一种颜色 
 
 
文本测试：鼠标通过时，文本背景改变颜色，离开后恢复原来的颜色 
 
 
<font face="宋体" size="3" color="#008000" onMouseOver="JavaScript:this.style.backgroundColor='#FF0000';this.style.textDecoration='underline';" onMouseOut="JavaScript:this.style.backgroundColor='#0000FF';this.style.textDecoration='none';">文本测试：鼠标通过时，文本背景改变颜色并显示下划线，第一次离开后又改变成另外一种颜色 
 
 
 
图片测试 
 
 
图片载入时比较模糊，当鼠标通过时变得清晰，离开后又恢复原来的样子（opacity 后面的数字是调节清晰度的，要多少清晰度自己修改） 
 
<img src="/Upload/200808/200809080001.jpg" border="0" style="filter:alpha(opacity=40);" onMouseOver="JavaScript:this.filters.alpha.opacity='100';" onMouseOut="JavaScript:this.filters.alpha.opacity='40';"> 
 
 
 
表格测试

<table border="1" width="500" height="10"> 
 <tr bgcolor="#FFFFFF" onMouseOver="JavaScript:this.style.backgroundColor='#FF0000';" onMouseOut="JavaScript:this.style.backgroundColor='';"> 
 <td height="30" width="490">当鼠标通过这一行时，背景颜色改变，离开时又恢复原来的颜色</td> 
 </tr> 
 <tr> 
 <td height="30" width="490"></td> 
 </tr> 
</table>

注：onMouseOver="JavaScript:this.style.backgroundColor='#FF0000';" 这一句是鼠标通过时行背景要显示的颜色，#FF0000 这是十六进制的颜色代码，可以自行修改；onMouseOut="JavaScript:this.style.backgroundColor='';" 这一句是鼠标离开时行背景要显示的颜色，这里颜色代码留空，表示恢复行原来的背景颜色。 
 
</body> 
</html>

文章作者：啊估整理更新日期：2009-10-05

〖文章浏览：〗〖发送文章〗〖打印文章〗

相关文章	·使用脚本(JavaScript)对下拉表单(Select)选择而改变表单文本框(Input)的字体.字号... 2009-07-14 ·使用脚本(JavaScript)实现同一个页面中的多个层(div)同时只显示指定的一个 2009-08-19 ·使用脚本(JavaScript)实现同一表单(form)中同时全选/反选/清除两个不同名称的复选框(.. 2009-08-19

〖文章阅读说明〗
·本站大部分文章转载于网络，如有侵权请留言告知，本站即做删除处理。
·本站法律法规类文章转载自[中国政府网(www.org.cn)]，相关法律法规如有修订，请浏览[中国政府网]网站。
·本站转载的文章，不为其有效性，实效性，安全性，可用性等做保证。
·如果有什么问题，或者意见建议，请联系［网站管理员］。

当百网

本站使用【啊估文章软件站】网站系统〖网站管理员留言簿〗

文章·资料	电脑软件	手机软件	网站源码
电脑·手机·网络学习话题娱乐故事文化·历史国学典籍法律法规	操作系统网络办公·文件音频视频图形图像硬件·驱动程序行业教学学习编程游戏	安卓苹果鸿蒙其他	ASP .NET JSP PHP HTML·CSS·JavaScript