1.记住密码提示框

用JS实现：当鼠标移入的时候显示提示框，鼠标移出的时候隐藏提示框


 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style>
 7             #div1{
 8                 width: 100px;
 9                 height: 50px;
10                 background: #FFCC99;
11                 border: 1px solid #FF9900;
12                 display: none;
13             }
14         </style>
15     </head>
16     <body>
17         <!--当鼠标移入的时候，把div1的style的display变成block-->
18          <input type="checkbox"   onmouseover="document.getElementById('div1').style.display='block';" 
19              onmouseout="document.getElementById('div1').style.display='none';"/> 记住密码
20     
21         <div id="div1">
22             为了您的账号安全，请谨慎选择！
23         </div>
24         
25     </body>
26 </html>

代码如上，我们会发现，当鼠标移入选择框时会实现显示隐藏的功能，但是当鼠标移入“记住密码”这些字的时候，功能并不能实现，我们要想实现当移入密码也能实现此功能，只要加一个<lable>标签即可。

 1 <body>
 2         <!--当鼠标移入的时候，把div1的style的display变成block-->
 3         <label onmouseover="document.getElementById('div1').style.display='block';" 
 4                onmouseout="document.getElementById('div1').style.display='none';">
 5             <input type="checkbox" /> 记住密码
 6         </label>
 7     
 8         <div id="div1">
 9             为了您的账号安全，请谨慎选择！
10         </div>
11         
12     </body>

这样就可以实现无论是移入字体还是选择框时都可以实现显示和隐藏的功能了。

第一小节总结：

效果原理

Js中的事件

当...时候

onmouseover(鼠标移入） onmouseout（鼠标移出）

alert的使用（弹出一个对话框）

元素获取

id（相当于名字）

document.getElementById() 获取元素

属性操作

obg.style.display=’block’

Js中class都叫做className

1.记住密码 提示框

1.记住密码提示框