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

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

本站搜索

推荐文章 More...

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

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

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

文章阅读排行

	Microsoft SQL Server 2000.. 　　对于第一次安装 Microsoft ..

	清华同方计算机系统本部技.. 一、声卡无声　　声卡无声可..

	Windows PE 系统安装微软.. 如果电脑没有光驱，或者没有把..

	腾讯：难以承受之痛的背后.. 亲爱的网吧管理员：　　在此，..

	计算机世界：“狗日的”腾讯计算机世界封面　　“有什..

	百度框计算和 Google 云计.. 　　1、目的的不同：百度为的是..

	一个网吧网管谈论网络游戏.. 　　一说到“网管”两个字，大..

	批处理(.bat)更改网关代码批处理(.bat)更改网关代码 @EC..

	ADSL防御黑客攻击的十大办法目前，使用ADSL的用户越来越多，..

	把 Administrator 帐号添.. 把 Administrator 帐号添加到..

文章信息

使用脚本(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)]，相关法律法规如有修订，请浏览[中国政府网]网站。
·本站转载的文章，不为其有效性，实效性，安全性，可用性等做保证。
·如果有什么问题，或者意见建议，请联系［网站管理员］。

当佰网【关于·免责声明】

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

闽ICP备08009617号

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