当前位置： 首页 > news >正文

关于CSS的几种字体悬浮的设置方法

news 2026/5/26 16:08:27

关于CSS的几种字体悬浮的设置方法

  • 1. 鼠标放上动态的
  • 2. 静态的（位置看上悬浮）
    • 2.1 参考QQ邮箱
    • 2.2 参考知乎

1. 鼠标放上动态的

  • 效果如下：
    在这里插入图片描述

  • 代码如下：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{background-color: cadetblue;height: 150px;width: 300px;}th,td{border: 1px solid;text-align: center;}.test{position: relative;}.test:before{content: "1314"; /*如果不给数据就是清空伪元素内容*/position: absolute; /*设置为绝对定位*/opacity: 0; /*初始透明度为0 ,注意：如果是非0就会一直悬浮，如果是0的话，鼠标放上去悬浮*/background-color: rebeccapurple; /*设置背景颜色*/color: #d5d5e1; /*设置文字颜色*/transform: translateY(-10px); /*向上移动10像素*/transition: all 0.2s ease-in-out; /*设置过渡效果*/padding: 10px; /*设置内边距*/top: -50%; /*将其移出父容器*//* left: 0; 在左侧 */right: -25px; /*在右侧*//* width: 100%; 与父容器同宽 */width: 20px;height: 10px;}.test:hover:before{opacity: 10; /*鼠标悬浮时透明度为1*/transform: translateY(0); /*移动位置为0*/}</style>
</head>
<body><table cellspacing="0"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th><th>粉丝</th></tr></thead><tbody><tr><td><div>小李</div></td><td>20</td><td>男</td><td>天津粉丝<span class="test"></span></td></tr><tr><td><div>小李</div></td><td>28</td><td>女</td><td>全国粉丝</td></tr><tr><td>小赵</td><td>31</td><td>男</td><td>北京粉丝</td></tr></tbody></table></body>
</html>

  • 参考地址：
    css如何设置悬浮文字.

  • 备注：这个用法有点像掘金上的，可以参考一下掘金上的，如下：
    在这里插入图片描述

2. 静态的（位置看上悬浮）

  • 是的，接下来就是告诉你对于小白前端怎么扒各大网站上的样式代码😂，一起看吧……

2.1 参考QQ邮箱

  • 首先，先登录自己的QQ邮箱看效果：
    在这里插入图片描述
    在这里插入图片描述
    这个点是图片，没有也没关系，借鉴的是实现方式！

  • 下面实现的效果有点丑，不过也算是位置悬浮了吧，效果如下：
    在这里插入图片描述

  • 核心代码如下：

      ```html.my_hover_number {width: 40px;height: 20px;display: inline-block;/* background: url(/zh_CN/htmledition/images/newicon/mail4788ca.png) -112px -192px no-repeat; */background-color: blueviolet;margin-left: 1px;vertical-align: top;position: relative;top: -10px;}```

  • 整个网页代码如下：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{background-color: cadetblue;height: 150px;width: 300px;}th,td{border: 1px solid;text-align: center;}.my_hover_number {width: 40px;height: 20px;display: inline-block;/* background: url(/zh_CN/htmledition/images/newicon/mail4788ca.png) -112px -192px no-repeat; */background-color: blueviolet;margin-left: 1px;vertical-align: top;position: relative;top: -10px;}</style>
</head>
<body><table cellspacing="0"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th><th>粉丝</th></tr></thead><tbody><tr><td><div>小李</div></td><td>20</td><td>男</td><td>天津粉丝<span class="my_hover_number">350</span></td></tr><tr><td><div>小李</div></td><td>28</td><td>女</td><td>全国粉丝</td></tr><tr><td>小赵</td><td>31</td><td>男</td><td>北京粉丝</td></tr></tbody></table></body>
</html>

2.2 参考知乎

  • 首先，先登录自己的知识账号，看知乎网站的效果：
    在这里插入图片描述

  • 复制过来代码看自己的效果（只复制99+的样式）：
    在这里插入图片描述

  • 代码如下：

    • 核心样式代码：
      .jiu_jiu{box-sizing: border-box;margin: 0px;min-width: 0px;color: rgb(255, 255, 255);background-color: rgb(241, 64, 60);padding-left: 4px;padding-right: 4px;position: relative;/* bottom: 65%; *//* left: 42%; */top: -60%;width: 30%;left: 70%;font-size: 11px;border-radius: 20px;border: 2px solid rgb(255, 255, 255);transform: scale(0.8);
}
    • 整个页面代码：
      <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{background-color: cadetblue;height: 150px;width: 300px;}th,td{border: 1px solid;text-align: center;}.my_hover_number {width: 40px;height: 20px;display: inline-block;/* background: url(/zh_CN/htmledition/images/newicon/mail4788ca.png) -112px -192px no-repeat; */background-color: blueviolet;margin-left: 1px;vertical-align: top;position: relative;top: -10px;}.jiu_jiu{box-sizing: border-box;margin: 0px;min-width: 0px;color: rgb(255, 255, 255);background-color: rgb(241, 64, 60);padding-left: 4px;padding-right: 4px;position: relative;/* bottom: 65%; *//* left: 42%; */top: -60%;width: 30%;left: 70%;font-size: 11px;border-radius: 20px;border: 2px solid rgb(255, 255, 255);transform: scale(0.8);}</style>
</head>
<body><table cellspacing="0"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th><th>粉丝</th></tr></thead><tbody><tr><td><div>小李</div></td><td>20</td><td>男</td><td>天津粉丝<span class="my_hover_number">350</span></td></tr><tr><td><div>小李</div></td><td>28</td><td>女</td><td>全国粉丝<div class="jiu_jiu">999+</div></td></tr><tr><td>小赵</td><td>31</td><td>男</td><td>北京粉丝</td></tr></tbody></table></body>
</html>

  • 好了就这样吧，方式都差不多，多看看别的网站而已！

相关文章：

关于CSS的几种字体悬浮的设置方法

关于CSS的几种字体悬浮的设置方法 1. 鼠标放上动态的2. 静态的&#xff08;位置看上悬浮&#xff09;2.1 参考QQ邮箱2.2 参考知乎 1. 鼠标放上动态的 效果如下&#xff1a; 代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><met…...

编程日记 2023/11/5 15:30:02

心脏骤停急救赋能

文章目录 0. 背景知识1. 遇到有人突然倒地怎么办1.1 应急反应系统1.2 高质量CPR1.2.1 胸外按压1.2.2 人工呼吸 1.3 AED除颤1.3.1 AED用法 1.4 高级心肺复苏1.5 入院治疗1.6 康复 0. 背景知识 中国每30s就有人倒地&#xff0c;他们可能是工作压力大的年轻人&#xff08;工程师群…...

编程日记 2023/11/5 15:27:59

Android 13.0 根据app包名授予app监听系统通知权限

1.概述 在13.0的系统rom产品定制化开发中，在一些产品rom定制化开发中，系统内置的第三方app需要开启系统通知权限，然后可以在app中，监听系统所有通知，来做个通知中心的功能，所以需要授权获取系统通知的权限，然后来顺利的监听系统通知。来做系统通知的功能，接下来来实现…...

编程日记 2023/11/5 15:25:57

校园招聘系统

校园管理系统 公共模块学生端游客端企业联系人端校内管理员端超级管理员端企业端 公共模块 登录 用户可以通过验证码、账号密码进行登录。 个人中心 学生端 学生主要为查看招聘信息以及投递等。 首页 简历详情投递 双选会公司详情 公告通知 学生端主要为这些等等&#xf…...

编程日记 2023/11/5 15:24:56

SpringBoot-SpringCache缓存

文章目录 Spring Cache 介绍常用注解 Spring Cache 介绍 Spring Cache 是一个框架&#xff0c;实现了基于注解的缓存功能&#xff0c;只需要简单地加一个注解&#xff0c;就能实现缓存功能。 Spring Cache 提供了一层抽象&#xff0c;底层可以切换不同的缓存实现&#xff0c;…...

编程日记 2023/11/5 15:23:55

服务器带宽忽然暴增，不停的触发告警

问题&#xff1a; 线上环境&#xff0c;服务器的外网下行带宽达到某个阈值&#xff0c;触发告警&#xff0c;查了下服务器的带宽监控信息&#xff0c;是从某个时间开始突然串上去的&#xff0c;然后监控图形非常有规律&#xff0c;都是每秒达到顶峰后&#xff0c;又立马下去了…...

编程日记 2023/11/5 15:22:54

Linux学习笔记之二（环境变量）

Linux learning note 1、环境变量1.1、修好PATH环境变量 1、环境变量 环境变量(environment variables)即系统运行的一些环境参数。主要的环境变量有以下这些&#xff1a; PATH&#xff1a;决定了系统查找可执行文件的目录范围。HOME&#xff1a;指定当前用户的主目录路径。U…...

编程日记 2023/11/5 15:20:52

设计模式——备忘录模式（Memento Pattern）

文章目录 一、备忘录模式定义二、例子2.1 菜鸟例子2.1.1 定义副本类2.1.2 定义对象2.1.3 定义CareTaker 类2.1.3 使用 2.2 JDK —— Date 三、其他设计模式 一、备忘录模式定义 类型&#xff1a; 行为型模式 目的&#xff1a; 保存一个对象的某个状态&#xff0c;以便在适当的…...

编程日记 2023/11/5 15:19:50

C++ 代码实例：多项式除法简单计算工具

文章目录 前言代码仓库代码说明核心片段 结果总结参考资料作者的话 前言 C 代码实例&#xff1a;多项式除法简单计算工具。 代码仓库 yezhening/Programming-examples: 编程实例 (github.com)Programming-examples: 编程实例 (gitee.com) 代码 说明 由于代码篇幅较多&#…...

编程日记 2023/11/5 15:18:49

MySql表自修改报错：You can‘t specify target table ‘student‘ for update in FROM clause

文章目录 一、发现问题二、场景1&#xff1a;在where条件中查询了修改表的数据三、场景2&#xff1a;在set语句中查询了修改表的数据 一、发现问题 在一次准备处理历史数据sql时&#xff0c;出现这么一个问题&#xff1a;You cant specify target table 表名 for update in FR…...

编程日记 2023/11/5 15:17:48

LeetCode 热题100——链表专题

一、俩数相加 2.俩数相加&#xff08;题目链接&#xff09; 思路&#xff1a;这题题目首先要看懂&#xff0c;以示例1为例 即 342465807&#xff0c;而产生的新链表为7->0->8. 可以看成简单的从左向右&#xff0c;低位到高位的加法运算&#xff0c;4610&#xff0c;逢…...

编程日记 2023/11/5 15:16:46

植物花粉深度学习图片数据集大合集

最近收集了一波有关于植物花粉的图片数据集&#xff0c;可以用于相关深度学习模型的搭建&#xff0c;废话不多说&#xff0c;上数据集&#xff01;&#xff01;&#xff01; 1、23种花粉类型805张花粉图像数据集 关于此数据&#xff1a;花粉种类和类型的分类是法医抱粉学、考…...

编程日记 2023/11/5 15:15:45

面试算法48：序列化和反序列化二叉树

题目 请设计一个算法将二叉树序列化成一个字符串&#xff0c;并能将该字符串反序列化出原来二叉树的算法。 分析 先考虑如何将二叉树序列化为一个字符串。需要逐个遍历二叉树的每个节点&#xff0c;每遍历到一个节点就将节点的值序列化到字符串中。以前序遍历的顺序遍历二叉…...

编程日记 2023/11/5 15:14:43

【Python基础】Python编程入门自学笔记，基础大全，一篇到底！

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…...

编程日记 2023/11/5 15:13:42

windows自动登陆

新建文本粘贴下面代码&#xff0c;另存为注册表文件 Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Driver Signing] "Policy"hex:00[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Winlogon]"DefaultUserN…...

编程日记 2023/11/5 15:12:41

5G及其后的5G非地面网络：趋势和研究挑战-HARQ部分

NTN组件纳入5G架构第一步 在NTN SI中定义了一组架构选项。就NT部分而言&#xff0c;已确定了两大类&#xff1a;星载&#xff08;即基于卫星的通信平台&#xff09;和机载&#xff08;即HAPS&#xff09;设备 并行管理HARQ最大进程数 NHARQRTT(NTX−1)2μ NTX&#xff1a;传输…...

编程日记 2023/11/5 15:11:40

【WPF系列】- XAML语法规范

【WPF系列】- XAML语法规范 文章目录 【WPF系列】- XAML语法规范一、概述二、对象元素语法三、特性语法&#xff08;属性&#xff09;四、特性值的处理五、枚举特性值六、属性和事件成员名称引用七、属性元素语法八、集合语法九、XAML 内容属性XAML 内容属性值必须是连续的 十、…...

编程日记 2023/11/5 15:10:38

antv/g6之图布局及切换布局

一般图布局 目前为止&#xff0c;g6的一般图布局已经有13种了&#xff0c;如下: Random Layout&#xff1a;随机布局&#xff1b;Force2 Layout&#xff1a;G6 4.7.0 后支持力导向布局&#xff0c;与 gForce 相比性能更强&#xff1b;GForce Layout&#xff1a;G6 4.0 支持的…...

编程日记 2023/11/5 15:09:37

Wordpress plugin removes ‘/category‘

plugin removes /category from your category permalinks Remove Category URL – WordPress plugin | WordPress.org...

编程日记 2023/11/5 15:07:35

【大数据基础平台】星环TDH社区集群版本部署

&#x1f984; 个人主页——&#x1f390;开着拖拉机回家_大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f…...

编程日记 2023/11/5 15:05:33

隧道裂缝剥落病害AI识别系统

我国现有公路隧道超2.5万座&#xff0c;总里程超2.8万公里&#xff0c;其中运营超过15年的老旧隧道占比达35%。据交通运输部2025年统计&#xff0c;年均因隧道结构病害导致的交通中断超1200次&#xff0c;直接经济损失超45亿元。传统检测模式暴露四大核心痛点&#xff1a;检测周…...

编程新知 2026/5/26 3:44:10

从Gamma函数到泊松分布：一个概率论中的含参量积分实用案例解析

Gamma函数与泊松分布&#xff1a;概率论中的数学之美 在数据科学和机器学习的实践中&#xff0c;概率分布构成了建模的基石。当我们深入探究这些分布背后的数学原理时&#xff0c;Gamma函数以其优雅的性质和广泛的应用脱颖而出。它不仅连接了离散与连续概率世界&#xff0c;更在…...

编程新知 2026/5/26 2:23:30

AI时代程序员职业发展与个人创业可行性研究报告

一、行业宏观变革&#xff08;2026核心趋势数据佐证&#xff09; 1.1 开发范式已彻底重构&#xff08;行业不可逆拐点&#xff09; 2026年正式进入AI Agent智能体开发时代&#xff0c;传统CRUD编码价值持续崩塌。 核心权威数据&#xff1a; Gartner预测&#xff1a;2026年75%企…...

编程新知 2026/5/26 2:11:27

告别C盘战士！ArcGIS 10.6安装路径选择与磁盘空间优化全攻略

告别C盘战士&#xff01;ArcGIS 10.6安装路径选择与磁盘空间优化全攻略当GIS初学者第一次安装ArcGIS 10.6时&#xff0c;往往会被其庞大的安装体积所震惊。许多用户习惯性地点击"下一步"&#xff0c;结果发现C盘空间被迅速吞噬&#xff0c;系统运行变得迟缓。本文将深…...

编程新知 2026/5/26 2:05:15

第二周（第12周）

1.单电源供电的二阶低通滤波器2.功率放大电路...

编程新知 2026/5/26 1:57:14

光效崩坏？噪点泛滥？色温漂移？——Midjourney专业级光效渲染全流程校准协议，含ACEScg色彩空间适配模板

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;光效崩坏、噪点泛滥与色温漂移的系统性归因诊断 图像采集链路中出现的光效崩坏、噪点泛滥与色温漂移并非孤立现象&#xff0c;而是光学设计、传感器响应、ISP管线调度及环境耦合失配共同作用的结果。三者常呈现…...

编程新知 2026/5/26 0:42:31

厨房空调技术白皮书：从风冷到水冷，制冷系统在厨房场景中的工程化演进

厨房空调是暖通行业近三年技术迭代最密集的细分品类。从最初的"凉霸"&#xff08;本质是风扇&#xff09;&#xff0c;到风冷分体式&#xff0c;再到水冷一体式&#xff0c;每代技术都在解决上一代没有覆盖的用户痛点。本文以工程技术视角&#xff0c;梳理四代厨房制…...

编程新知 2026/5/25 23:08:50

WTF Auto Layout? 实战：10个常见约束冲突案例解析与解决方案

WTF Auto Layout? 实战&#xff1a;10个常见约束冲突案例解析与解决方案 【免费下载链接】wtfautolayout The source code for Why The Failure, Auto Layout? 项目地址: https://gitcode.com/gh_mirrors/wt/wtfautolayout 在iOS开发中&#xff0c;Auto Layout是构建灵…...

编程新知 2026/5/25 21:58:13

TorchDynamo与TorchInductor：PyTorch编译器生态的完整解析

TorchDynamo与TorchInductor&#xff1a;PyTorch编译器生态的完整解析 【免费下载链接】torchdynamo A Python-level JIT compiler designed to make unmodified PyTorch programs faster. 项目地址: https://gitcode.com/gh_mirrors/to/torchdynamo TorchDynamo 是一个…...

编程新知 2026/5/25 21:31:50

全球无障碍宣传日：iOS 26 辅助功能大升级，这些实用小功能你用过吗？

辅助功能发展与升级很多人对辅助功能的印象还停留在 "小白点"&#xff0c;但随着 iPhone 进入全面屏时代&#xff0c;它逐渐变得陌生。实际上&#xff0c;Apple 每年都会为其增添功能&#xff0c;方便身体有障人士使用 iPhone。而且&#xff0c;这些功能不仅惠及有障…...

编程新知 2026/5/25 21:07:31