html标题效果,css如何实现title效果

css如何实现title效果

1、首先在元素上添加自定义数据data-title；

2、然后通过伪类选择器:hover和::after设置悬浮显示的样式

3、最后通过attr()获取自定义的数据即可。

(推荐学习：CSS视频教程)

代码如下：

Document

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;

}

hello...

效果：

把鼠标移动到此处，有效果哦

更多CSS相关技术文章，请访问CSS3答疑栏目进行学习！