首页 » 建站技术 » 浏览内容

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


2012-01-23 13:43:15 2,594 0 发表评论 字体: 作者:C.K.
标签: css

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。
<!DOCTYPE html>  
  • <html>  
  • <head>  
  • <meta charset="utf-8" />  
  • <title>测试css tip</title>  
  • <style>  
  • a.tooltip{  
  •     position:relative;  
  • }  
  • a.tooltip span{  
  •     display:none;  
  • }  
  • a.tooltip:hover span, a.tooltip:focus span{  
  •     display:block;  
  •     position:absolute;  
  •     left:20px;  
  •     top:18px;  
  •     padding:2px 5px;  
  •     border:1px solid #999;  
  •    background:#F3EFA7;  
  •    color:#333;  
  • }  
  • </style>  
  • </head>  
  •  
  • <body>  
  • <p><a href="javascript:;" class="tooltip">这是要测试一下css tip提示效果<span>(test css tip)</span></a>,测试纯CSS提示效果</p>  
  • </body>  
  • </html>
    1. 网站统计 Statistics

      • 创建时间: 2005年1月3日 距今4947 天
      • 日志总数: 2461
      • 评论总数: 630
      • 标签总数: 654
      • 链接总数: 273
      • 最后更新: 2017-7-1 18:16:33
      • 您是本站第 13720956 位访客

      广告区 Guǎng Gào