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

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

本站搜索

推荐文章 More...


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

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

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

文章阅读排行


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

	ASP：Dimac W3 JMail 发送.. 【发送邮件测试代码下载】压..

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

	VMware Workstation：安装.. 编写这份虚拟机安装的图文教程，..

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

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

文章信息

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

当百网

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