首页 > 代码库 > 纯css来实现提示框

纯css来实现提示框

用js用多了,就疏忽了最基本的css了---用title属性来实现提示框。下面言归正传------如何用css实现提示框:

1、利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用title属性时,提示框的样式是默认的,而利用自定义的data-title属性时,提示框的样式和位置自己可以随意定义),

首先,要将鼠标需要悬浮的元素相对定位,
再次,利用hover和伪类的绝对定位来显示提示的内容

代码如下:

技术分享
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>提示框</title>
 6     <style>
 7         #box{width: 400px;margin: 100px auto;}
 8 
 9         /*首先,要将鼠标需要悬浮的元素相对定位*/
10         #con2{position: relative;margin: 40px auto;}
11 
12         /*再次,利用伪类的绝对定位来显示提示的内容*/
13         #con2:hover:after{
14             content: attr(data-title);
15             /*利用attr来读取data-title的值*/
16             position: absolute;
17             left: -120px;
18             top:30px;
19             border: 1px solid #ccc;
20             background: #f1f7f7;
21             border-radius: 5px;
22             padding: 10px 15px;
23         }
24     </style>
25 </head>
26 <body>
27 <div id="box">
28     <div id="con" title="这是一个测试,这是一个测试,这是一个测试">这是一个测是...</div>
29 
30 
31     <div id="con2" data-title="这是第二个测试,这是第二个测试,这是第二个测试">这是第二个...</div>
32 </div>
33 
34 </body>
35 </html>
View Code

 效果图如下

技术分享

技术分享

两者的对比,第一个图是利用自己定义的data-title属性,提示框的样式可以自己定义

第二个图是利用title实行,提示框的样式是默认的。两者各有好处。

纯css来实现提示框