说明：代码来自网络。注释为笔者学习时添加。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>记住密码提示框</title> <style> body,input,p{ margin:0; padding:0; } body{ font:12px/1.5 Tahoma; } #outer{ width:200px; margin:10px auto; } input{ margin-right:5px; vertical-align:middle; } #tips{ padding:5px; margin-top:5px; background:#ffefa4; /*提示背景浅黄色*/ display:none; /*不显示*/ } </style> <script> window.onload = function () { var oTips = document.getElementById("tips"); //获取tips提示的引用 var oLabel = document.getElementsByTagName("label")[0]; //获取标签的引用，命令返回的是一个对象集合，故需用[0]取第一个元素 oLabel.onmouseover = function () { //注册mouseover事件，设置元素样式的display属性值为block oTips.style.display = "block"; }; oLabel.onmouseout = function () { //注册mouseout事件，设置元素样式的display属性值为none oTips.style.display = "none"; } } </script> </head> <body> <!--一个div包裹一个input和 div，input又用label标签包裹--> <div id="outer"> <label><input type="checkbox" />两周内自动登陆</label> <div id="tips">为了您的信息安全，请不要在网吧或公用电脑上使用此功能！</div> </div> </body> </html>