利用css3实现简单的hover提示功能
【鼠标放置在某个文本框之上，出现提示语信息，提示框的样式可以自定义】
以下代码中：
第一个div利用原始title属性定义提示语，样式默认
第二个div利用css定义提示语的边框位置/颜色等，可灵活定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提示框</title>
<style>
#box{width: 400px;margin: 100px auto;}
/*首先，要将鼠标需要悬浮的元素相对定位*/
#con2{position: relative;margin: 40px auto;}
/*再次，利用伪类的绝对定位来显示提示的内容*/
#con2:hover:after{
content: attr(data-title);
/*利用attr来读取data-title的值*/
position: absolute;
left: -120px;
top:30px;
border: 1px solid #ccc;
background: #f1f7f7;
border-radius: 5px;
padding: 10px 15px;
}
</style>
</head>
<body>
<div id="box">
<div id="con" title="这是一个测试，这是一个测试，这是一个测试">这是一个测是...</div>
<div id="con2" data-title="这是第二个测试，这是第二个测试，这是第二个测试">这是第二个...</div>
</div>
</body>
</html>
1835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
