网站首页 > 基础教程 正文
点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
文章开始先看一个将要实现的效果-悬浮提示。
上面效果，传统的做法就是使用title属性来实现。 下面这样：
传统的做法可控性不强，使用起来有点僵硬，如果想要自定义一个悬浮提示，那就得使用CSS3提供的attr：能够在css中获取到元素的某个属性值，然后插入到伪元素的content中去。
html代码如下：
CSS代码如下：
悬浮提示效果完全可以自定义。当然元素hover的时候，在元素尾部添加一个内容是元素data-title的属性值。
猜你喜欢
- 2024-10-15 简单拖拽即生成网页 VvvebJs 拖拽生成html页面前端框架
- 2024-10-15 WordPress 常用函数:esc_html wordpress功能代码
- 2024-10-15 前端入门——css 选择器 css选择器详解
- 2024-10-15 CSS实现html指令式Tips文字提示 css提示信息
- 2024-10-15 从青铜到王者10个css3伪类使用技巧和运用
- 2024-10-15 10-CSS3选择器详解 css~选择器
- 2024-10-15 用 Java 拿下 HTML 分分钟写个小爬虫
- 2024-10-15 你想知道的CSS3选择器，全在这里 你想知道的css3选择器,全在这里的英文
- 2024-10-15 不要再封装各种Util工具类了，这个神级框架值得拥有
- 2024-10-15 jQuery中CSS简单操作(获取，追加，移除，切换，判断)【406】
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)