首页 > 代码库 > 纯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>
效果图如下
两者的对比，第一个图是利用自己定义的data-title属性，提示框的样式可以自己定义
第二个图是利用title实行，提示框的样式是默认的。两者各有好处。
纯css来实现提示框
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。