标签:
这是初始文字
右边是一个测试文本框:
鼠标划过、点击、松开上面的文字都会有不同的效果,鼠标光标移到、离开文本框也会有不同的效果。
首先新建一个html文件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" src="me.js"></script> </head> <body> <h1 id="mytext" onmouseover="OnMouseOver(this)" onmouseout="OnMouseOut(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)" style="width:300px;border:1px solid red;">这是初始文字</h1> <br/> 右边是一个测试文本框:<input type="text" onfocus="OnFocus(this)" onblur="OnBlur(this)"> </body> </html>
其中引入了一个js文件,所以接下来新建一个js文件,名为me.js
function OnMouseOver(id) { id.innerHTML = "鼠标划过"; } function OnMouseOut(id) { //鼠标离开回到初始状态 id.innerHTML = "这是初始文字"; } function OnMouseDown(id) { id.innerHTML = "鼠标已按下"; } function OnMouseUp(id) { id.innerHTML = "鼠标已松开"; } function OnFocus(x) { x.style.background = "yellow"; } function OnBlur(x) { x.style.background = "white"; }
更多用法参考http://www.w3school.com.cn/jsref/index.asp
标签:
原文地址:http://www.cnblogs.com/hellovenus/p/5003496.html