一點小小的創意css滑鼠放上去則顯示電話號碼_經驗交流

來源:互聯網
上載者:User
1, default:

2,滑鼠移上去:

來源: 今天在同事的手機的電話薄裡面發現的,發現他存的電話號碼都是顯示名字,然後只要往下移動,就能顯示這個人的相應的號碼。 然後自己就在想,這還滿不錯的嘛。於是就想到以前好象收藏過類似的效果。 稍微改下。 總結:生活中的發現無處不在,能夠善於發現,然後勤于思考、聯想,這樣的確是個優點
。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>comasp's blog</title>  <style type="text/css">  a{      color: #FFFF99;      text-decoration: none;  }a:hover{      color: #FFFFFF;      text-decoration: underline;  }       #nav{      padding: 10px 10px 0;      font-size: 12px;      font-weight: bold;      margin: 1em 0 0;      list-style:none;  }.bi{      position: relative;      z-index: 0;  }.bi:hover{      z-index: 99;  }.bi:hover span{      visibility: visible;      top: 0;      left: 0;      cursor: pointer;  }.bi span{      position: absolute;      left: -999em;      visibility: hidden;  }#nav li a,.bi:hover span{      line-height: 20px;      text-decoration: none;      background: #DDDDDD;      color: #666666;      display: block;      width: 80px;      text-align: center;  }#nav li a:hover,.bi:hover span{      color: #FFFFFF;      background: #DC4E1B;  }.bi:hover span{      padding-top: 2px;  }  </style>  </head>  <body>      <ul id="nav">        <li><a href="index.html">張三<span>13011111111</span></a></li>        <li><a href="about.html">李四<span>13022222222</span></a></li>        <li><a href="products.html">王五<span>13033333333</span></a></li>        <li><a href="services.html">趙六<span>13044444444</span></a></li>        <li><a href="contact.html">什麼七去了<span>13055555555</span></a></li>      </ul>  </body>  </html>
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.