随笔记录方便自己和同路人查阅, 学习 CSS 时最好先学会 html.
#------------------------------------------------ 我是可耻的分割线 -------------------------------------------
Hover 当鼠标移动到当前标签上时, 以下 CSS 属性才生效
比如我们鼠标移动到一个标签它就变颜色
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- .pg-header{ position:fixed; right: 0; left: 0; top: 0; height:48px; background-color:#2459a2;
- /* 表示放在标签中间 */ line-height: 48px; } .pa-boby{ margin-top:50px; } .w{ width:980px;
- margin:0 auto; } .pg-header .menu{ display: inline-block; padding: 0 10px
- 0 10px; color: white; } /* 当鼠标移动到当前标签上时, 以下 CSS 属性才生效 */ .pg-header .menu:hover{
- background-color: blue; }
- </style>
- </head>
- <body>
- <div class="pg-header">
- <div class="w">
- <a class="logo">
- LOGO
- </a>
- <a class="menu">
- 全部
- </a>
- <a class="menu">
- 42 区
- </a>
- <a class="menu">
- 段子
- </a>
- <a class="menu">
- 1024
- </a>
- </div>
- </div>
- <div class="pg-body">
- <div class="w">
- a
- </div>
- </div>
- </body>
- </HTML>
效果:
来源: http://www.bubuko.com/infodetail-3211986.html