首页 > 代码库 > 用纯css的方法实现popout内容

用纯css的方法实现popout内容

2024-08-10 06:58:31   216人阅读

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

用纯css的方法实现popout内容


联系
我们