 文 章 信 息 |
使用脚本(JavaScript)实现鼠标通过(onMouseOver)/离开(onMouseOut)文本、图片、表格时的特殊效果
| 〖文章分类：电脑·手机·网络 / HTML·CSS·JavaScript〗〖阅读选项〗 |
文本测试：
<br>
<br>
<font face="宋体" size="3" color="#008000"
onMouseOver="JavaScript:this.style.color='#FF0000';"
onMouseOut="JavaScript:this.style.color='';">文本测试：鼠标通过时，文本改变颜色，离开后恢复原来的颜色</font>
<br>
<br>
<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>
<br>
<br>
<font face="宋体" size="3" color="#008000"
onMouseOver="JavaScript:this.style.backgroundColor='#FF0000';"
onMouseOut="JavaScript:this.style.backgroundColor='';">文本测试：鼠标通过时，文本背景改变颜色，离开后恢复原来的颜色</font>
<br>
<br>
<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';">文本测试：鼠标通过时，文本背景改变颜色并显示下划线，第一次离开后又改变成另外一种颜色</font>
<br>
<br>
<br>
图片测试
<br>
<br>
图片载入时比较模糊，当鼠标通过时变得清晰，离开后又恢复原来的样子（opacity 后面的数字是调节清晰度的，要多少清晰度自己修改）
<br>
<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';">
<br>
<br>
<br>
表格测试
<br>
<br>
<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='';" 这一句是鼠标离开时行背景要显示的颜色，这里颜色代码留空，表示恢复行原来的背景颜色。
|
| 文章作者：啊估整理 更新日期：2009-10-05 |
| 〖文章浏览：〗〖发送文章〗〖打印文章〗 |
|
|
|
本 站 搜 索
文 章 阅 读 排 行