CSS3如何将“悬浮提示”功能玩出花样

文章开始先看一个将要实现的效果-悬浮提示。

上面效果，传统的做法就是使用title属性来实现。 下面这样：

传统的做法可控性不强，使用起来有点僵硬，如果想要自定义一个悬浮提示，那就得使用CSS3提供的attr：能够在css中获取到元素的某个属性值，然后插入到伪元素的content中去。

html代码如下：

小郑是干嘛的?

CSS代码如下：

.tips{

color:red;

margin:120px;

position:relative;

}

.tips:hover::after{

content:attr(data-title);

display:inline-block;

padding:10px 14px;

border: 1px solid #ddd;

border-radius:5px;

color:#333;

position:absolute;

top:-50px;

left:-30px;

}

悬浮提示效果完全可以自定义。当然元素hover的时候，在元素尾部添加一个内容是元素data-title的属性值。