css如何实现title效果
1、首先在元素上添加自定义数据data-title；
2、然后通过伪类选择器:hover和::after设置悬浮显示的样式
3、最后通过attr()获取自定义的数据即可。
（推荐学习：CSS视频教程）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
position: relative;
}
div:hover::after {
content: attr(data-title); /*取到data-title属性的值*/
display: inline-block;
padding: 10px 14px;
border: 1px solid #ddd;
border-radius: 5px;
position: absolute;
top: 30px;
left: 20px;
}
</style>
</head>
<body>
<div data-title="hello, world">hello...</div>
</body>
</html>
效果：
把鼠标移动到此处，有效果哦
更多CSS相关技术文章，请访问CSS3答疑栏目进行学习！
以上就是css如何实现title效果的详细内容，更多请关注0133技术站其它相关文章！
