凹丫丫网络社区 » 【网络编程】 » 纯CSS链接气泡提示效果

乖乖狗 发表于 2008-6-29 19:34

纯CSS链接气泡提示效果

<P><STRONG><FONT color=deepskyblue>&lt;style&gt;<BR>.test{position:relative;color:#0000cc;text-decoration:none;font-size:12px;}<BR>.test:hover{background:none;}<BR>.test span {display: none;}<BR>.test:hover span{display:block;position:absolute;top:20px;left:8px;border-bottom:2px solid #eee;border-right:2px solid #eee;}<BR>.test:hover span p{border:1px solid #ccc;background:#fff;color:#000;padding:5px;text-align:left;font-size:12px;}<BR>&lt;/style&gt;</FONT></STRONG></P>
<P><STRONG><FONT color=deepskyblue>&lt;a class="test" href="#"&gt;cssbbs&lt;span&gt;&lt;p&gt;CSSBBS_www.CSSBBS.com&lt;/p&gt;&lt;/span&gt;&lt;/a&gt;&nbsp; |<BR>&lt;a class="test" href="</FONT></STRONG><A href='http://www.cssbbs.com">cssbbs.com<span><p'><STRONG><FONT color=deepskyblue>http://www.cssbbs.com"&gt;cssbbs.com&lt;span&gt;&lt;p</FONT></STRONG></A><STRONG><FONT color=deepskyblue>&gt;这里是文字介绍啊&lt;/p&gt;&lt;/span&gt;&lt;/a&gt;&nbsp; |<BR>&lt;a class="test" href="</FONT></STRONG><A href="http://www.cssbbs.com"><STRONG><FONT color=deepskyblue>http://www.cssbbs.com</FONT></STRONG></A><STRONG><FONT color=deepskyblue>"&gt;链接三&lt;span&gt;&lt;p&gt;这里是文字介绍啊&lt;/p&gt;&lt;/span&gt;&lt;/a&gt;</FONT></STRONG></P>
<P><A href="http://www.cssbbs.com/bbs/viewthread.php?tid=150&amp;extra=page%3D1"><STRONG><FONT color=deepskyblue></FONT></STRONG></A>&nbsp;</P>

稻草人 发表于 2008-6-30 21:21

内容带有链接
广告吗?

红土 发表于 2008-7-18 01:06

顶一个.....

[size=2]呵呵~顶......[/size]
[size=2][/size]
[size=2][/size]
[size=2][/size]
[size=2][/size]
[size=2][/size]
[size=2][/size]
[size=2][/size]
[size=2][/size]
[size=2][/size]

[size=2][/size]
[size=2][/size]
[size=2][/size]
[url=http://www.blog-travel.info/][size=1][color=silver]旅游博客注册[/color][/url][/size]

zhchgg1234 发表于 2008-8-13 17:14

呵呵,顶一下,感谢分享

查看完整版本: 纯CSS链接气泡提示效果