标签：
在没有引用jquery和其他插件的时候，可以通过纯css的方法实现popout框，效果类似tooltip。这种方法虽然很拙劣，但是未尝也是一种解决办法。我们都知道a标签有几个伪类可以使用，这里要特别注意的是a:link,a:visited,a:hover,a:active这四个伪类的顺序，若不按这样的顺序可能会导致无法实现预期的效果。一般我们只用a:hover这个伪类来实现悬停的效果，而巧妙地利用这个伪类，我们可以实现类似tooltip的效果。但这有一些缺陷，就是popout的内容必须在a标签内，仅仅提供一种解决的思路，建议大家不到走投无路的时候不要模仿。下面是代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>纯css方法实现popout内容</title> 6 <style> 7 a{ 8 display:inline-block; 9 text-decoration:none; 10 font-size:20px; 11 padding:10px 30px; 12 color:white; 13 background:blue; 14 position:relative; 15 } 16 17 a:hover div.pop{ 18 display:block; 19 } 20 div.pop{ 21 position:absolute; 22 left:0; 23 top:45px; 24 padding:10px 40px; 25 color:white; 26 background:rgba(0,0,0,.7); 27 display:none; 28 } 29 </style> 30 </head> 31 <body> 32 <a>弹出框 33 <div class="pop"> 34 <p>这是弹出内容</p> 35 </div> 36 </a> 37 </body> 38 </html>
标签：
原文地址：http://www.cnblogs.com/DongJianguo/p/4189016.html
