第二十九节 display的none属性 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         <!-- 使用display的none属性设置悬浮显示 -->
 8         .con{
 9             width: 300px;
10             height: 300px;
11         }
12 
13         .box{
14             width: 100px;
15             height: 100px;
16             background-color: gold;
17             display: none;
18         }
19 
20         .con:hover .box{
21             display: block;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="con">
27         <h3>文字的标题</h3>
28         <div class="box">标题文字的说明</div>
29     </div>
30 </body>
31 </html>

 

posted @ 2020-03-05 23:15  kog_maw  阅读(162)  评论(0)  编辑  收藏  举报