纯CSS打造TIP提示效果,代替传统TITLE提示

林继 VPS 知识 2,760 共写了29个字 (2012-01-23 13:43:15) 没有评论 打印 扫描二维码 百度未收录
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8" />  
  5. <title>测试css tip</title>  
  6. <style>  
  7. a.tooltip{  
  8.     position:relative;  
  9. }  
  10. a.tooltip span{  
  11.     display:none;  
  12. }  
  13. a.tooltip:hover span, a.tooltip:focus span{   
  14.     display:block;  
  15.     position:absolute;  
  16.     left:20px;  
  17.     top:18px;  
  18.     padding:2px 5px;  
  19.     border:1px solid #999;  
  20.     background:#F3EFA7;  
  21.     color:#333;   
  22. }  
  23. </style>  
  24. </head>  
  25.  
  26. <body>  
  27. <p><a href="javascript:;" class="tooltip">这是要测试一下css tip提示效果<span>(test css tip)</span></a>,测试纯CSS提示效果</p>  
  28. </body>  
  29. </html>

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

< >