CSS3怎么将“悬浮提示”功能玩出花样(自定义

2019-09-10 郑州网站建设  

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

CSS3怎么将“悬浮提示”功能玩出花样(自定义)

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

CSS3怎么将“悬浮提示”功能玩出花样(自定义)

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

html代码如下:

CSS3怎么将“悬浮提示”功能玩出花样(自定义)

CSS代码如下:

CSS3怎么将“悬浮提示”功能玩出花样(自定义)

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


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1667.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • 一个
  • 实现
  • 开始
  • ν
  • 文章
  • 将要