JS特效-滑鼠提示框
阿新 • • 發佈：2018-11-07
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> 17function 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>