文章开始先看一个将要实现的效果-悬浮提示。
上面效果,传统的做法就是使用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的属性值。
领取专属 10元无门槛券
私享最新 技术干货