用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.rhkb.cn/news/376345.html

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

相关文章

【VS2019】安装下载库HtmlAgilityPack,可解析 HTML (图文详情)

目录 0.背景 1.环境 2.详细步骤 0.背景 项目需要&#xff0c;搭建WCF服务&#xff0c;需求是输入一个string类型字符串&#xff08;网页代码&#xff0c;如<html><body><p>Hello, <b>World</b>!</p></body></html>&#xf…

《代理选择与反爬虫策略探究:如何优化网络爬虫效率与稳定性》

代理IP如何选以及常见反爬策略 为什么需要代理&#xff1f; 因为有的网站会封IP&#xff0c;用户如果没有登录&#xff0c;那IP就是身份标识&#xff0c;如果网站发现用户行为异常就非常可能封IP 什么是代理IP 就是让一个人帮你转交请求&#xff0c;帮你转交的人对面不熟&a…

<数据集>猫狗识别数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;3686张 标注数量(xml文件个数)&#xff1a;3686 标注数量(txt文件个数)&#xff1a;3686 标注类别数&#xff1a;2 标注类别名称&#xff1a;[cat, dog] 序号类别名称图片数框数1cat118811892dog24982498 使用标…

vmware 虚拟机扩容 centos 硬盘扩容 kylinos v10扩容

1. 虚拟机先扩容 1.1 关机&#xff0c;并点击系统&#xff0c;让他是点选状态&#xff0c;但是没开机 1.2 右击&#xff0c;点击最下方设置&#xff0c;点击硬盘 1.3 点击扩展磁盘 1.4 选择你需要扩容的大小&#xff0c;数字为总大小 完成提示&#xff1a; 磁盘已成功扩展。您…

整洁架构SOLID-接口隔离原则(ISP)

文章目录 定义ISP与编程语言ISP与软件架构小结 定义 在上图中有多个用户需要操作OPS类。现在&#xff0c;我们假设这里的User1只需要使用op1,User2只需要使用op2,User3只需要使用op3。 在这种情况下&#xff0c;如果OPS类是用Java编程语言编写的&#xff0c;那么很明显&#x…

安全防御实验2

一、实验拓扑 二、实验要求 办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换)分公司设备可以通过总公司的移动链路和电信链路访问到Dmz区的http服务器多出口环境基于带宽比例进行选路&#xff0c;但是&#xff0c;办公区…

electron + express 实现 vue 项目客户端部署

写在前面 作为一个前端程序员&#xff0c;如何实现从前端到客户端的跨越&#xff0c;可能是一个很难实现的事。但客户需求千奇百怪&#xff0c;偶尔遇到一个非要客户端的&#xff0c;如何应对&#xff1f; 那Electron可能真是你福音。具体它有哪些功能&#xff0c;可自行官网…

《斯科特·凯尔比的风光摄影手册》读书笔记

写在前面 《斯科特凯尔比的风光摄影手册》读书笔记整理没有全部读完&#xff0c;选择了感兴趣的章节理解不足小伙伴帮忙指正 &#x1f603;,生活加油 99%的焦虑都来自于虚度时间和没有好好做事&#xff0c;所以唯一的解决办法就是行动起来&#xff0c;认真做完事情&#xff0c;…

2-33 基于matlab的用于计算无故障的斜齿轮对啮合时接触线长度随时间的变化

基于matlab的用于计算无故障的斜齿轮对啮合时接触线长度随时间的变化&#xff0c;根据需求设置斜齿轮对的相应参数&#xff0c;得到结果。程序已调通&#xff0c;可直接运行。 2-33 斜齿轮对啮合时接触线长度 齿轮参数 - 小红书 (xiaohongshu.com)

MongoDB - 查询操作符:比较查询、逻辑查询、元素查询、数组查询

文章目录 1. 构造数据2. MongoDB 比较查询操作符1. $eq 等于1.1 等于指定值1.2 嵌入式文档中的字段等于某个值1.3 数组元素等于某个值1.4 数组元素等于数组值 2. $ne 不等于3. $gt 大于3.1 匹配文档字段3.2 根据嵌入式文档字段执行更新 4. $gte 大于等于5. $lt 小于6. $lte 小于…

RocketMQ~架构了解

简介 RocketMQ 具有高性能、高可靠、高实时、分布式 的特点。它是一个采用 Java 语言开发的分布式的消息系统&#xff0c;由阿里巴巴团队开发&#xff0c;在 2016 年底贡献给 Apache&#xff0c;成为了 Apache 的一个顶级项目。 在阿里内部&#xff0c;RocketMQ 很好地服务了集…

修复 Ubuntu 24.04 Dock 丢失应用程序图标

找出应用程序窗口的类名 首先&#xff0c;您需要启动应用程序窗口。然后&#xff0c;按 Alt F2 启动“运行 Command”对话框。当对话框打开时&#xff0c;输入 lg 并按 Enter 键。 在该窗口中&#xff0c;单击Windows按钮&#xff0c;然后找出目标应用程序窗口的类名称。 在/…

使用 Apache Pulsar 构建弹性可扩展的事件驱动应用

本视频来自 2024 Apache Pulsar 欧洲峰会&#xff0c;由 David Kjerrumgaard, 《Pulsar in Action》书作者给大家带来的《使用 Apache Pulsar 构建弹性可扩展的事件驱动应用》分享。 嘉宾&#xff5c;David Kjerrumgaard&#xff0c;Apache Pulsar Committer&#xff0c;《Pul…

Android焦点之SurfaceFlinger的apply

接animate()的openSurfaceTransaction(),prepareSurfaces(),closeSurfaceTransaction() 1. mService.openSurfaceTransaction()&#xff0c;通过SurfaceControl来通知native开始一个Transaction&#xff1b; 2. mService.closeSurfaceTransaction()&#xff0c;通过SurfaceCo…

InjectFix 热更新解决方案

简介 今天来谈一谈&#xff0c;项目种的客户端热更新解决方案。InjectFix是腾讯xlua团队出品的一种用于Unity中C#代码热更新热修复的解决方案。支持Unity全系列&#xff0c;全平台。与xlua的思路类似&#xff0c;InjectFix解决的痛点主要在于Unity中C#代码写的逻辑在发包之后无…

主机安全-开源HIDS字节跳动Elkeid安装使用

目录 概述什么是HIDSHIDS与NIDS的区别EDR、XDR是啥&#xff1f; Elkeid架构Elkeid Agent && Agent centerElkeid DriverElkeid RASPElkeid HUBService DiscoveryManager安装数据采集规则&告警 参考 概述 什么是HIDS HIDS&#xff08; host-based intrusion detec…

LeetCode 3011.判断一个数组是否可以变为有序

注&#xff1a;这个题目有序的意思是“升序” 解法一&#xff1a;bubblesort O(nlogn) 核心思想&#xff1a;冒泡每次会将一个数归位到最后的位置上&#xff0c;所以我们如果碰到无法向右交换的数字&#xff0c;即可return false class Solution { public:// 返回一个十进制…

计算机网络——网络层(IP地址与MAC地址、地址解析协议ARP、IP数据报格式以及转发分组、ICMP、IPV6)

IP地址与MAC地址 由于MAC地址已固化在网卡上的ROM 中&#xff0c;因此常常将 MAC地址称为硬件地址或物理地址&#xff1b;物理地址的反义词就是虚拟地址、软件地址或逻辑地址&#xff0c;IP地址就属于这类地址。 从层次的角度看&#xff0c;MAC地址是数据链路层使用的地址&…

如何查找电脑的MAC地址

一. 什么是mac地址&#xff1f; mac地址本质上帮助我们连接到我们遇到的大多数本地网络。每个网络适配器通常由网络接口​​控制器(NIC) 制造商分配一个唯一的 mac 地址。 二. 如何查找mac地址 1.点击网络和Internet设置 2.点击WLAN点击硬件属性 3.即可查看mac地址

Facebook 开源计算机视觉 (CV) 和 增强现实 (AR) 框架 Ocean

Ocean 是一个独立于平台的框架&#xff0c;支持所有主要操作系统&#xff0c;包括 iOS、Android、Quest、macOS、Windows 和 Linux。它旨在彻底改变计算机视觉和混合现实应用程序的开发。 Ocean 主要使用 C 编写&#xff0c;包括计算机视觉、几何、媒体处理、网络和渲染&#x…