纯css来实现提示框

最新推荐文章于 2023-08-17 11:08:44 发布

diaonue3157

最新推荐文章于 2023-08-17 11:08:44 发布

阅读量185

点赞数

原文链接：http://www.cnblogs.com/jiajia123/p/6129960.html

版权

用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实行，提示框的样式是默认的。两者各有好处。

转载于:https://www.cnblogs.com/jiajia123/p/6129960.html

diaonue3157

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css来实现提示框

用js用多了，就疏忽了最基本的css了---用title属性来实现提示框。下面言归正传------如何用css实现提示框：1、利用title属性来实现鼠标滑过某个元素时，实现提示整段内容的功能（利用title属性时，提示框的样式是默认的，而利用自定义的data-title属性时，提示框的样式和位置自己可以随意定义），首先，要将鼠标需要悬浮的元素相对定位,再次，利用hover和...
复制链接

扫一扫