- <html>
- <title>纯CSS链接提示效果</title>
- <style>
- div{
- clear:both;
- margin:5px 0 0 0;
- font-size:12px;
- line-height:22px;
- }
- a.alt{
- position:relative;
- background-color:#f8f8f8;
- float:left;
- width:158px;height:20px;
- margin:0 auto;
- border:1px solid #ccc;
- text-align:center;
- text-decoration:none;
- color:#555;
- }
- a.alt:hover{background:#EEE; text-decoration:none;z-index:2;}
- a.alt span{display:none;}
- a.alt:hover span{
- position:absolute;
- display:block;
- top:-1px;left:158px;
- width:190px;border:1px solid #ccc;
- z-index:1;
- background-color:#fff;
- }
- </style>
- </head>
- <body>
- <div><a class='alt' href="http://www.baidu.com"><span>全球中文搜索门户</span>百度一下</a></div>
- <div><a class='alt' href="http://www.codesc.net/"><span>开源源码下载</span>源码素材网</a></div>
- <div><a class='alt' href="http://www.oschina.net"><span>开源代码分享!</span>开源代码</a></div>
- </body>
- </html>
来源: http://www.phpxs.com/code/1006089/