用onmouseover同时改变超链接的颜色及下划线 -

阿拉丁没有神灯

浏览: 181977 次
性别:
来自: 南京

最近访客更多访客>>

我真的好无奈

weet77

raintip

konnysnow

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

用onmouseover同时改变超链接的颜色及下划线

博客分类：

css href

变换文字颜色：

<a href="www.baidu.com" target="..." onMouseOver="this.style.color='#8E6235';this.style.textDecoration='underline'" onMouseOut="this.style.color='#808284';this.style.textDecoration='none'">文本</a>



鼠标略过时的颜色

onMouseOver="this.style.color='#8E6235'"

鼠标离开时的颜色

onMouseOut="this.style.color='#808284'"

================================================================================================

变换背景图片：

onmousemove="this.style.backgroundImage='url(Images/HomeTBGCChange.jpg)'"
onmouseout="this.style.backgroundImage='url(Images/HomeTBGC.jpg)'"

================================================================================================

变换鼠标形状：

onmousemove="this.style.cursor='hand';"

onmouseout="this.style.cursor='auto';"

================================================================================================

更加详细且丰富的onMouseOver 事件（包含图片清晰度，表格等）
<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="UploadPicture/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>

分享到：