首页 前端知识 用HTML和CSS实现提示工具(tooltip)及HTML元素的定位

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

2024-08-10 00:08:43 前端知识 前端哥 318 662 我要收藏

所谓提示工具,是指将鼠标移动到某个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属性选择一个开始值
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15131.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!