首页 > Web开发 > 详细

css content 的 attr 用法 (实现悬浮提示)

时间:2016-04-09 12:07:05      阅读:216      评论:0      收藏:0      [点我收藏+]

content 的attr 实现 鼠标悬浮 显示 悬浮提示,

content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。

方法/步骤

  1. 1

    <div>

        <span data-tooltip="hello world">Hover Me!!!</span>

    </div>

  2. 2

    css如下

    技术分享
  3. 3

    data-  为自定义属性,如上 自定义 提示 data-tooltip ="hello world",

    配合   before ,after 使用 content 的attr 调用 自定义提示,

    content: attr(data-tooltip);

  4. 4

    鼠标悬浮显示效果图如下:

    技术分享

css content 的 attr 用法 (实现悬浮提示)

原文:http://www.cnblogs.com/hjsblogs/p/5371232.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!