js跟随光标提示框的效果。
<html>
<head>
<title>跟随光标的提示框_脚本学堂_http://www.jb200.com</title>
<mce:script type="text/javascript">
<!--
function clickTextInput(){
var msgDiv = document.getElementById("msg");
msgDiv.innerText="you click the text input.";
}
function mouseOverTextInput(){
var msgDiv = document.getElementById("msg");
msgDiv.innerText="your mousr over.";
}
//页面内元素的onmouseover事件的处理方法
document.onmousemove=function(){
if(event.srcElement.hint) {
a.style.display="block";
a.innerHTML=event.srcElement.hint;
a.style.left=window.event.clientX+10;
a.style.top=window.event.clientY+10;
setTimeout("a.style.display='none'",8000);
}else{
a.style.display="none"
}
}
// --></mce:script>
</head>
<body>
<form>
<table>
<tr>
<td><input name="yourname" hint="输入框" type="text" onclick="clickTextInput();" onmouseover="javascript:mouseOverTextInput();" />
<input hint="sssss"/>
</tr>
</table>
<p>
<input type="submit" name="Submit" value="提交" hint="mmmmmm" />
<select name="select" hint="xxxxx">
<option value="w">ss</option>
<option value="w">w</option>
<option value="t">e</option>
<option value="s">d</option>
</select>
</p>
<div id="msg"></div>
<div id="a" style="position:absolute;font-size:9pt;display:none;
border:1px solid black;background:lightyellow"
mce_style="position:absolute;font-size:9pt;
display:none;border:1px solid black;background:lightyellow"> </div>
</form>
</body>
</html>