| 〖打印本页〗〖打印选项〗 |
| 使用脚本(JavaScript)实现鼠标通过(onMouseOver)/离开(onMouseOut)文本、图片、表格时的特殊效果 |
| 文本测试： <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='';" 这一句是鼠标离开时行背景要显示的颜色，这里颜色代码留空，表示恢复行原来的背景颜色。 文章作者：啊估整理 |