码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-04-09 12:07:44      阅读:782      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!