WEB前端

CSS3鼠标经过“悬浮提示”效果玩出花样(自定义)

位置:首页 > WEB前端 > css3教程,2018-08-11 17:00
文章开始先看一个将要实现的效果-悬浮提示。上面效果,传统的做法就是使用title属性来实现。 下面这样:传统的做法可控性不强,使用起来有点僵硬,如果想要自定义一

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

CSS3鼠标经过提示(图0)


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

CSS3鼠标经过提示(图1)


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

html代码如下:

CSS3鼠标经过提示(图2)


CSS代码如下:

CSS3鼠标经过提示(图2)


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

TAGS:CSS3鼠标经过提示

猜你喜欢

NewHot