用HTML和CSS实现提示工具(tooltip)及HTML元素的定位

所谓提示工具,是指将鼠标移动到某个HTML元素(工具)时会显示一些提示内容(提示文本),而鼠标移出工具元素的范围时提示文本就消失了。考虑到提示文本元素应当在鼠标进入工具元素时显示,鼠标离开工具元素时隐藏,可以将提示文本元素定义在工具元素的内部,作为其子元素。这样,鼠标没有进入工具元素时,提示文本元素是工具元素的子元素,而当鼠标进入工具元素时,提示文本元素是工具元素伪类:hover的子元素。只需将作为工具元素的子元素的提示文本元素的visibility样式赋值为hidden,将作为工具元素伪类:hover的子元素的提示文本元素的visibility样式赋值为visible,即实现了提示文本元素随着鼠标进出工具元素而显示与隐藏。
另一个需要处理的问题就是确定提示文本元素的显示位置。提示文本元素不应该占据文档流中的位置,否则,如果鼠标没有进入工具元素的范围,提示文本元素的visibility样式为hidden,页面会出现空白区域,影响页面外观。因此,应该将提示文本元素的样式规定为absolute或fixed,将其移出正常文档流且不进行页面定位,同时将工具元素的position规定为relative,使其成为浏览器计算提示文本元素定位时的锚点。

HTML元素的position样式可用值以及含义如下:

  • static

该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

  • relative

该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

  • absolute

元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。由于此祖先元素最好在文档流中占据正常位置,其position实际上应该赋值为relative。absolute定位的元素可以设置外边距(margins),且不会与其他边距合并。它显示时可能会盖住页面中的其他元素。

  • fixed

元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。它与absolute定位的区别在于元素的位置在屏幕滚动时不会改变。它显示时可能会盖住页面中的其他元素。

  • sticky

元素根据正常文档流进行定位,然后相对它的最近滚动祖先和最近块级祖先,包括 table-related 元素,基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。它显示时可能会盖住页面中的其他元素。

基于以上分析,可以定义如下css作为提示工具使用的样式:

/*工具元素的样式,要点在于应当为relative定位*/
.tooltip {position: relative;display: inline-block;background-color: aqua;
}
/*作为工具元素的子元素的提示文本元素的样式,
要点在于css选择器使用“.tooltip .tooltiptext”,
规定visibility为hidden,将position规定为
absolute或fixed*/
.tooltip .tooltiptext {visibility: hidden;width: 150%;/*宽度赋值为百分比时,以父元素的宽度为计算基数*/background-color: gray;text-align: left;text-indent: 2em;font-family: Cambria, Aa虎头虎脑;border-radius: 0.5em;padding: 0.2em 0.1em;color: #ff0;top: 1.5em;/*距父元素顶部1.5个字符高,以免盖住父元素*/left: 1em;/* 定位 */position: absolute;//position: fixed;z-index: 1;
}
/*作为工具元素伪类hover的子元素的提示文本元素的样式,
要点在于css选择器使用“.tooltip:hover .tooltiptext”,
将visibility赋值为visible,实现鼠标进入工具元素范围
时显示提示文本元素*/
.tooltip:hover .tooltiptext {visibility: visible;
}

在HTML页面中只需定义如下一组元素,即可实现tooltip效果:

<div class="tooltip">工具元素 <span class="tooltiptext">这是工具元素的提示信息</span>
</div>

完整示例页面如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tooltip</title>
<style>
.tooltip {position: relative;display: inline-block;background-color: aqua;
}
.tooltip .tooltiptext {visibility: hidden;width: 140%;background-color: gray;text-align: left;text-indent: 2em;font-family: Cambria, Aa虎头虎脑;border-radius: 0.5em;padding: 0.2em 0.1em;color: #ff0;top: 1.5em;left: 1em;/* 定位 */position: absolute;z-index: 1;
}
.tooltip:hover .tooltiptext {visibility: visible;
}
</style>
</head><body>
<div class="tooltip">工具元素 <span class="tooltiptext">这是工具元素的提示信息</span>
</div>
<span>相邻元素</span><br>
<div>下方的元素</div>
</body>
</html>

鼠标进入工具元素区域时的效果如下图:

最后,将所有css伪类选择器搬运过来:

伪类选择器示例示例说明
:checkedinput:checked选择所有选中的表单元素
:disabledinput:disabled选择所有禁用的表单元素
:emptyp:empty选择所有没有子元素的p元素
:enabledinput:enabled选择所有启用的表单元素
:first-of-typep:first-of-type选择的每个 p 元素是其父元素的第一个 p 元素
:in-rangeinput:in-range选择元素指定范围内的值
:invalidinput:invalid选择所有无效的元素
:last-childp:last-child选择所有p元素的最后一个子元素
:last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素
:not(selector):not(p)选择所有p以外的元素
:nth-child(n)p:nth-child(2)选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素
:only-of-typep:only-of-type选择所有仅有一个子元素为p的元素
:only-childp:only-child选择所有仅有一个子元素的p元素
:optionalinput:optional选择没有"required"的元素属性
:out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性
:read-onlyinput:read-only选择只读属性的元素属性
:read-writeinput:read-write选择没有只读属性的元素属性
:requiredinput:required选择有"required"属性指定的元素属性
:rootroot选择文档的根元素
:target#news:target选择当前活动#news元素(点击URL包含锚的名字)
:validinput:valid选择所有有效值的属性
:linka:link选择所有未访问链接
:visiteda:visited选择所有访问过的链接
:activea:active选择正在活动链接
:hovera:hover把鼠标放在链接上的状态
:focusinput:focus选择元素输入后具有焦点
:first-letterp:first-letter选择每个<p> 元素的第一个字母
:first-linep:first-line选择每个<p> 元素的第一行
:first-childp:first-child选择器匹配属于任意元素的第一个子元素的 <p> 元素
:beforep:before在每个<p>元素之前插入内容
:afterp:after在每个<p>元素之后插入内容
:lang(language)p:lang(it)为<p>元素的lang属性选择一个开始值

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/46004.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mac安装stable diffusion 工具

文章目录 1.安装 Homebrew2.安装 stable diffusion webui 的依赖3.下载 stable diffusion webui 代码4.启动 stable diffusion webui 本体5.下载模型6.这里可能会遇到一个clip-vit-large-patch14报错 参考&#xff1a;https://brew.idayer.com/install/stable-diffusion-webui/…

STM32入门开发操作记录(二)——LED与蜂鸣器

目录 一、工程模板二、点亮主板1. 配置寄存器2. 调用库函数 三、LED1. 闪烁2. 流水灯 四、蜂鸣器 一、工程模板 参照第一篇&#xff0c;新建工程目录ProjectMould&#xff0c;将先前打包好的Start&#xff0c;Library和User文件^C^V过来&#xff0c;并在Keil5内完成器件支持包的…

jenkins系列-01.docker安装jenkins

进入官网&#xff1a;https://www.jenkins.io/ 使用LONG term support版本&#xff1a;2.387.1 docker pull jenkins/jenkins:2.387.1-lts 拉取镜像&#xff1a; 编写docker-compose文件&#xff1a; 启动jenkins: 查看启动日志&#xff1a; 默认生成的密码&#xff1a;…

基于springboot+vue+uniapp的超市购物系统小程序

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…

LeetCode 142.环形链表2 C写法

LeetCOde 142.环形链表2 C写法 思路1&#x1f914;&#xff1a; ​ 用环形链表的方法&#xff0c;快慢指针找到slow和fast的相遇点&#xff0c;此时头到入口点的位置与相遇点到入口点的距离一样。 ​ 我们假设头到入口点的长度为L&#xff0c;环的长度为C&#xff0c;相遇点到入…

Rust 测试的组织结构

测试的组织结构 本章一开始就提到&#xff0c;测试是一个复杂的概念&#xff0c;而且不同的开发者也采用不同的技术和组织。Rust 社区倾向于根据测试的两个主要分类来考虑问题&#xff1a;单元测试&#xff08;unit tests&#xff09;与 集成测试&#xff08;integration test…

负荷预测 | Matlab基于Transformer-LSTM多变量时间序列多步预测

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于Transformer-LSTM多变量时间序列多步预测&#xff1b; 2.多变量时间序列数据集&#xff08;负荷数据集&#xff09;&#xff0c;采用前96*2个时刻预测的特征和负荷数据预测未来96个时刻的负荷数据&#x…

记一次饱经挫折的阿里云ROS部署经历

前言 最近在参加的几个项目测评里&#xff0c;我发现**“一键部署”这功能真心好用&#xff0c;省下了不少宝贵时间和力气&#xff0c;再加上看到阿里云现在有个开源上云**的活动。趁着这波热潮&#xff0c;今天就聊聊怎么从头开始&#xff0c;一步步搞定阿里云的资源编排服务…

【持续集成_06课_Jenkins高级pipeline应用】

一、创建项目选择pipeline的风格 它主要是以脚本&#xff08;它自己的语言&#xff09;的方式进行运行&#xff0c;一般由运维去做的事情&#xff0c;作为测试而言。了解即可。 --- 体现形式全部通过脚本去实现&#xff1a;执行之前&#xff08;拉取代码&#xff09;执行&…

Linux:Linux网络总结(附下载链接)

文章目录 下载链接网络问题综合问题访问一个网页的全过程&#xff1f;WebSocket HTTPHTTP基本概念GET与POSTHTTP特性HTTP缓存技术HTTP的演变HTTP1.1 优化 HTTPSHTTP与HTTPS有哪些区别&#xff1f;HTTPS解决了HTTP的哪些问题&#xff1f;HTTPS如何解决的&#xff1f;HTTPS是如何…

# Redis 入门到精通(二)通用指令

Redis 入门到精通&#xff08;二&#xff09;通用指令 一、redis 通用指令-key 基本操作 1、key 特征 key是一个字符串&#xff0c;通过key获取redis中保存的数据。 2、key 应该设计哪些操作? 对于 key 自身状态的相关操作&#xff0c;例如:删除&#xff0c;判定存在&…

企业网络实验(vmware虚拟机充当DHCP服务器)所有IP全部保留,只为已知mac分配固定IP

文章目录 需求实验修改dhcp虚拟机配置文件测试PC获取IP查看user-bind 需求 (vmware虚拟机充当DHCP服务器)所有IP全部保留&#xff0c;只为已知mac分配固定IP 实验 前期配置&#xff1a; https://blog.csdn.net/xzzteach/article/details/140406092 后续配置均在以上配置的前…

keepalive和haproxy

1、keepalive 1.1概念 调度器的高可用 vip地址主备之间的切换&#xff0c;主在工作时&#xff0c;vip地址只在主上&#xff0c;主停止工作&#xff0c;vip漂移到备服务器 在主备的优先级不变的情况下&#xff0c;主恢复工作&#xff0c;vip会飘回到主服务器 1、配优先级 …

【RabbitMQ】一文详解消息可靠性

目录&#xff1a; 1.前言 2.生产者 3.数据持久化 4.消费者 5.死信队列 1.前言 RabbitMQ 是一款高性能、高可靠性的消息中间件&#xff0c;广泛应用于分布式系统中。它允许系统中的各个模块进行异步通信&#xff0c;提供了高度的灵活性和可伸缩性。然而&#xff0c;这种通…

.NET MAUI开源架构_1.学习资源分享

最近需要开发Android的App&#xff0c;想预研下使用.NET开源架构.NET MAUI来开发App程序。因此网上搜索了下相关资料&#xff0c;现在把我查询的结果记录下&#xff0c;方便后面学习。 1.官方文档 1.1MAUI官方学习网站 .NET Multi-Platform App UI 文档 - .NET MAUI | Micro…

Open-TeleVision——通过VR沉浸式感受人形机器人视野:兼备远程控制和深度感知能力

前言 7.3日&#xff0c;我司七月在线(集AI大模型职教、应用开发、机器人解决方案为一体的科技公司)的「大模型机器人(具身智能)线下营」群里的一学员发了《Open-TeleVision: Teleoperation with Immersive Active Visual Feedback》这篇论文的链接&#xff0c;我当时快速看了一…

shell脚本之if/case语句

一、条件测试 1、1 返回码 $? $? :返回码&#xff0c;用来判断命令或者脚本是否执行成功。 0 &#xff1a;表示true &#xff0c;成功&#xff1b;非0 则表示flase &#xff0c;失败。 1、2 test命令 可以进行条件测试&#xff0c;然后根据返回值来判断条件是否成立 -e…

RISC-V异常处理流程概述(2):异常处理机制

RISC-V异常处理流程概述(2):异常处理机制 一、异常处理流程和异常委托1.1 异常处理流程1.2 异常委托二、RISC-V异常处理中软件相关内容2.1 异常处理准备工作2.2 异常处理函数2.3 Opensbi系统调用的注册一、异常处理流程和异常委托 1.1 异常处理流程 发生异常时,首先需要执…

4、linux相关基础知识

1、gcc编译过程 .c通过编译生成.o文件&#xff0c;.out目标文件进过链接生成.so库文件。 2、在C中可以使用system(("mkdir -p "path).c_str())创建目录。c_str()把string转化为c字符串&#xff0c;便于system命令识别&#xff0c;system命令会新启动一个进程来创建文…

移动硬盘有盘符打不开:深度解析与高效恢复指南

在数字化信息爆炸的今天&#xff0c;移动硬盘作为便捷的数据存储与传输工具&#xff0c;其重要性不言而喻。然而&#xff0c;当您遇到移动硬盘有盘符却无法正常打开的情况时&#xff0c;无疑会给您的工作和生活带来不小的困扰。本文将深入探讨移动硬盘有盘符打不开的原因&#…