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

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

本站搜索

推荐文章 More...

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

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

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

文章阅读排行

文章信息

使用脚本(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