P01 鼠标提示框

鼠标提示框的功能演示

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>鼠标提示框</title>
 8     <style>
 9         #div1 {
10             width: 200px;
11             height: 200px;
12             background: #cccccc;
13             border: 1px solid #999999;
14             display: none;
15         }
16     </style>
17 </head>
18 
19 <body>
20     <h1>第一天的学习</h1>
21     <hr>
22 
23     <input 
24         type="checkbox" 
25         onmouseover="document.getElementById('div1').style.display='block'" 
26         onmouseout="document.getElementById('div1').style.display='none'">
27     <div id="div1">
28         为了你的信息安全,请不要在公共的场合使用该功能!!!
29     </div>
30 </body>
31 </html>

 

posted @ 2020-05-04 16:46  Runmoxin  阅读(123)  评论(0)  编辑  收藏  举报