变换文字颜色:
<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>
<!--注意两个属性之间用分号隔开,textDecoration 中 D 必须大写,且text 和 Decoration 之间没有横线(css中有横线)-->
鼠标略过时的颜色
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>
文本测试:
<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="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';">
<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>
<br>注:onMouseOver="JavaScript:this.style.backgroundColor='#FF0000';" 这一句是鼠标通过时行背景要显示的颜色,#FF0000 这是十六进制的颜色代码,可以自行修改;onMouseOut="JavaScript:this.style.backgroundColor='';" 这一句是鼠标离开时行背景要显示的颜色,这里颜色代码留空,表示恢复行原来的背景颜色。
</body>
</html>
分享到:
相关推荐
超链接颜色下划线 html,body{ height:100%;overflow:hidden; }设置高度100%必不可少的 background-repeat:round;图片全屏平铺 textarea 输入框 onmouseover ="changebackground1(this.id)" /*设置经过点击离开...
最近两天在温习onmouseover事件和onmouseout事件,其实里面有很多深奥的知识,接下来小编给大家带来了onmouseover事件和onmouseout事件全面了解,感兴趣的朋友一起看下
c# 在webFrom上实现tabcontrol功能,可以实现tabcontrol中的所有功能,包括onmouseover事件和onclick事件,程序附有注释容易理解。
<tr align="center" bgcolor="#FFFFFF" onMouseOver="this.bgColor='#009afe';" onMouseOut="this.bgColor='#FFFFFF';"> 细 表 <tr align="center" bgcolor="#FFFFFF" onMouseOver="this.bgColor='#009afe';" ...
主要介绍了通过onmouseover选项卡实现img图片的变化,需要的朋友可以参考下
实现类似超链接的效果,this代表本页面元素 代码如下: <html> <head> [removed] function mOver(obj){ obj.color=”red”; } function mOut(obj){ obj.color=”blue”; } [removed] </...
e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#37B4F5';this.style.cursor='pointer'"); e.Row.Attributes.Add("onmouseout","this.style.backgroundColor=c...
(1)使用onmouseover、onmouseout事件来实现树形菜单的效果。 (2)使用display属性实现层的显示和隐藏。 2、打开首页时弹出固定大小的广告页面窗口。 3、在页面的右侧有一个随滚动条上下移动的广告图片,并且...
兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版
此代码内容为鼠标移上去显示大图的代码,属于站长常用代码,更多图片特效代码请访问A5下载—网页特效频道。
c# 在webFrom上实现tabcontrol功能 onmouseover事件:鼠标移动到按钮上page页面更换 onclick事件:点击按钮页面更换
鼠标移上去显示别的东西,离开恢复原样;通过传递参数实现此功能
使用onmouseover和onmouseout事件实现不同的效果而且是使用js动态实现,本文有利于巩固你js与css方面的知识,感兴趣的你可以了解下哦,希望本文对你有所帮助
【前端 HTML+CSS+JavaScript(JS)】DOM练习-onkeydown键盘事件-用wasd移动图片的位置 带注释/总结 【前端 HTML+CSS+JavaScript(JS)】DOM练习-onmouseover事件 鼠标悬浮切换图片 带注释/总结 【前端 ...
一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout。 很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标...
将“ onClick="*" ”中的“*”移到“ onMouseOver="" ”中,改为: < A onClick="" onDblClick="" onKeyDown="" onKeyPress="" onKeyUp="" onMouseDown="" onMouseOut="" onMouseOver="*" onMouseUp="">
万年历 学校找的一个万年历网页 很好的一个
每一个导航标签用的是,当鼠标浮动到标签上时,通过onmouseover()立即改变的className,并用setInterval()来使其opacity(透明度)由0变到1.不过,当鼠标离开时,对于标签的颜色恢复的处理貌似麻烦了许多。所以,...