html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 纯 CSS Tooltips(鼠标经过时显示)</title>
- <style type="text/css">
- /*Tooltips*/
- .tooltips{
- position:relative; /* 这个是关键 */
- z-index:2;
- }
- .tooltips:hover{
- z-index:3;
- background:none; /* 没有这个在 IE 中不可用 */
- }
- .tooltips span{
- display: none;
- }
- .tooltips:hover span{ /*span 标签仅在 :hover 状态时显示 */
- display:block;
- position:absolute;
- top:21px;
- left:9px;
- width:15em;
- border:1px solid black;
- background-color:#ccFFFF;
- padding: 3px;
- color:black;
- }
- </style>
- </head>
- <body>
- <br /><br />
- <a class="tooltips" href="#tooltips"> 这就是 Tooltips<span > 如你所见, 这些附加的说明文字在鼠标经过的时候显示.</span></a>
- </body>
- </html>
来源: http://www.qdfuns.com/article/17568/e274cfd1dc0392e66900902648d1bfca.html