用纯css的方法实现popout内容

浏览数：67 / 时间：2015年06月09日

在没有引用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>