用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>
效果图如下
两者的对比，第一个图是利用自己定义的data-title属性，提示框的样式可以自己定义
第二个图是利用title实行，提示框的样式是默认的。两者各有好处。
时间： 2024-08-09 02:53:41