码迷,mamicode.com
首页 > 其他好文 > 详细

:hover的用法

时间:2018-04-27 13:43:28      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:图片   int   html   code   col   inf   width   info   body   

鼠标移入字体变色,下划线出现,移出则字体变为原来的颜色,下划线消失。

代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>:hover的用法</title>
 5     <style type="text/css">
 6         .box{
 7             width: 100px;
 8             margin: 0 auto;
 9             border:1px solid #ccc;
10         }
11         p{
12             color: blue;
13             cursor: pointer;
14             text-align: center;
15         }
16         p:hover{
17             text-decoration: underline;
18             color: orange;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="box">
24         <p>11111</p>
25         <p>22222</p>
26         <p>33333</p>
27         <p>44444</p>
28     </div>    
29 </body>
30 </html>

效果如下:

技术分享图片

:hover的用法

标签:图片   int   html   code   col   inf   width   info   body   

原文地址:https://www.cnblogs.com/myunYao/p/8960996.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!