在我们平时登录各种网站时，有个复选框，提示保存密码信息方便下次登陆，但是当鼠标放上去时，会显示一个框，提醒在非 安全环境下（网吧、别人电脑、公共电脑）时不要勾选。
现在就来利用JavaScript的两个事件来实现。
首先写一个复选框以及提示信息的div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一个javascript实例</title>
<style>
#tip {
width:200px;
height=100px;
background:pink;
border:1px solid #999;
display:none;
}
</style>
</head>
<body>
<div>
<input type="checkbox" name="checkbox" >保存密码
</div>
<br>
<br>
<div id="tip" >
<p>this is a test.</p>
</div>
</body>
</html>默认情况下，只显示复选框，这是因为在style（样式）中已经将提示文字的display属性设置为none，更改为block后，将会重 新显示。
我们要实现这个功能，简单的思想就是：
1.鼠标没有放在复选框上面时，不现实提示信息。2.当鼠标移动到复选框以及文字上，显示提示信息。
具体到实现上述两个功能，可以采用JavaScript中的onmouseover以及onmouseout，从单词字面意思就可以理解为鼠标置上与鼠标移开。即，当鼠标over在复选框上时，出发一个事件，鼠标out时，触发另一个事件。
具体是什么事件呢？因为JavaScript可以更改内容，我们可以这样子设想，over时，让提示信息的display属性设置为block，鼠标out时，设置display为none。这样子就可以实现了。
由于JavaScript是基于对象的，我们要对对象进行操作，首先要获取对象，这个可以给div设置一个ID，然后通过document对象的getElementById函数，具体代码如下：
<div οnmοuseοver="document.getElementById('tip').style.display='block';"
οnmοuseοut="document.getElementById('tip').style.display='none';">
<input type="checkbox" name="checkbox" >保存密码
</div>
<br>
<br>
<div id="tip" >
<p>this is a test.</p>
</div>tips：
1.因为触发事件的代码在双引号中，故在里面需要使用引号的地方都改为单引号。
2.函数getElementById( )中传递的参数为标签的ID，.style.display 为获取div的样式中display属性，然后就可以通过赋值的方式改变属性值，达到我们的目的。
933
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
