day15-CSS之hover

一、引子

　　我们之前一些网站，就是点击菜单栏的时候，会出现一些我们想要的效果，鼠标放上去的时候，颜色和其他的菜单栏不一样，这个是为啥呢？我们也想做这个东西，看起来好炫酷的感觉。

二、hover 实现这个酷炫的功能

　　下面先搞一个普通的网页头部

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .pg-header{
 8             background-color: greenyellow;
 9             height: 38px;
10             width: 99%;
11             line-height: 38px;
12         }
13         .menu{
14             color: white;
15             font-weight: bold;
16         }
17 
18     </style>
19 </head>
20 <body>
21     <div class="pg-header">
22         <a class="menu">全部</a>
23         <a class="menu">段子</a>
24         <a class="menu">1024</a>
25         <a class="menu">42区</a>
26 
27     </div>
28     <div>
29         body
30     </div>
31 
32 </body>
33 </html>

效果如下 ，鼠标移动到标题，没有任何效果，

下面我们通过hover 来给 他搞个酷炫的效果，在style 里编写CSS 效果样式，通过 :hover 关联，如下

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .pg-header{
 8             background-color: greenyellow;
 9             height: 38px;
10             width: 99%;
11             line-height: 38px;
12         }
13         .menu{
14             color: white;
15             font-weight: bold;
16             line-height: 38px;
17             padding: 0 10px 0 10px;
18             display: inline-block;
19         }
20         .menu:hover{
21             background-color: #000000;
22         }
23 
24     </style>
25 </head>
26 <body>
27     <div class="pg-header">
28         <a class="menu">全部</a>
29         <a class="menu">段子</a>
30         <a class="menu">1024</a>
31         <a class="menu">42区</a>
32 
33     </div>
34     <div>
35         boyd
36     </div>
37 
38 </body>
39 </html>

 

效果如下

三、小结

　　1、标签：hover{具体样式}  指的是：表示这个样式只要我的鼠标一点击的时候，这里面的样式就应用上了。

 

posted @ 2018-05-21 10:10  东郭仔  阅读(176)  评论(0)    收藏  举报