标签:
这是初始文字
右边是一个测试文本框:
鼠标划过、点击、松开上面的文字都会有不同的效果,鼠标光标移到、离开文本框也会有不同的效果。
首先新建一个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