1.分析效果实现原理
样式:div 的 display
事件: onmouseover 移入
onmouseout 移出
2.特效基础
事件驱动:onmouseover,onmouseout
元素属性操作:obj.style.[属性]
特效实现原理概括: 响应用户操作,对页面元素(标签)进行某种修改
鼠标移入提示移出隐藏代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>鼠标移入移出事件</title> 6 <style> 7 #div1 { 8 width: 200px; 9 height: 100px; 10 background: #CCC; 11 border: 1px solid #999; 12 display: none; 13 } 14 </style> 15 16 <script> 17 function toover() { 18 document.getElementById('div1').style.display = "block"; 19 20 } 21 22 function toout() { 23 document.getElementById("div1").style.display = "none"; 24 } 25 </script> 26 </head> 27 <body> 28 <input type="checkbox" onmouseover="toover()" onmouseout="toout()">记住密码 29 <div id="div1"> 30 为了您的信息安全,请不要在公共场合保存密码 31 </div> 32 </body> 33 </html>