CSS学习笔记（十九）CSS 工具提示，图像样式

最新推荐文章于 2022-12-05 11:40:34 发布

〔晴【天】º〕

最新推荐文章于 2022-12-05 11:40:34 发布

阅读量165

点赞数

分类专栏：前端学习文章标签： css html

本文链接：https://blog.csdn.net/qq_43625134/article/details/117216845

版权

前端学习专栏收录该内容

34 篇文章 1 订阅

订阅专栏

CSS 工具提示

基础的工具提示

创建一个鼠标移到元素上时显示的工具提示：

实例

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* 定位工具提示 */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<p>请把鼠标移到下面的文字上：</p>

<div class="tooltip">移到我上面
  <span class="tooltiptext">工具提示文本</span>
</div>

</body>
</html>

例子解释
HTML：
使用容器元素（例如 <div>）并向其添加 “tooltip” 类。当用户将鼠标悬停在此 <div> 上时，会显示工具提示文本。

工具提示文本位于 class=“tooltiptext” 的嵌入式元素（如 <span>）中。

CSS：
tooltip 类使用 position:relative，用于放置工具提示文本（position:absolute）。注意：有关如何放置工具提示，请参见下面的例子。

tooltiptext 类保存实际的工具提示文本。默认情况下它是隐藏的，并会在鼠标悬停时可见（请参阅下文）。我们还为其添加了一些基本样式：120 像素的宽度、黑色背景、白色文本、文本居中以及 5px 的上下内边距（padding）。

CSS border-radius 属性用于向工具提示文本添加圆角。

当用户将鼠标移到 class=“tooltip” 的 <div> 上时，:hover 选择器用于显示工具提示文本。

定位工具提示

在本例中，工具提示位于“可悬停”文本（<div>）的右侧（left:105%）。另外请注意，top:-5px 用于将其放置在其容器元素的中间。我们使用数字 5 是因为工具提示文本的上下内边距均为 5px。如果增加其内边距，还请您同时增加 top 属性的值，以确保它停留在中间。如果要将工具提示放在左侧，也同样适用。

右侧工具提示

.tooltip .tooltiptext {
  top: -5px;
  left: 105%; 
}

左侧工具提示

.tooltip .tooltiptext {
  top: -5px;
  right: 105%; 
}

如果您希望工具提示位于上方或下方，请看下面的例子。请注意，我们使用了负 60 像素的左外边距属性（margin-left）。这是为了把工具提示与可悬停文本进行居中对齐。该值是工具提示宽度的一半（120/2 = 60）。

顶部工具提示

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%; 
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

底部工具提示

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

工具提示箭头
如需创建在工具提示的指定侧面显示的箭头，请在工具提示后添加“空的”内容，并使用伪元素类 ::after 和 content 属性。箭头本身是使用边框创建的。这会使工具提示看起来像气泡。

本例演示如何在工具提示的底部添加箭头：

底部箭头

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

例子解释
将箭头定位在工具提示内：top: 100% 将箭头放置在工具提示的底部。left: 50% 将使箭头居中。

注意：border-width 属性指定箭头的大小。如果您更改此设置，也请将 margin-left 值更改为相同值。这将使箭头居中。

border-color 用于将内容转换为箭头。我们将上边框设置为黑色，其余设置为透明。如果所有面都是黑色，则最终将得到一个黑色的方形框。

本例演示了如何在工具提示的顶部添加箭头。请注意，这次我们设置了下边框的颜色：
顶部箭头

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

本例演示如何在工具提示的左侧添加箭头：

左侧箭头

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

本例演示如何在工具提示的右侧添加箭头：

右侧箭头
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
淡入的工具提示（动画）
如果希望在即将显示的工具提示文本中淡入淡出，可以将 CSS transition 属性与 opacity 属性一同使用，并在指定的秒数（例子中是 1 秒）内从完全不可见变为 100％可见：

实例

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}

CSS 图像样式

圆角图像

使用 border-radius 属性创建圆形图像：
实例
圆角图像:

img {
  border-radius: 8px;
}

实例
圆形图像：

img {
  border-radius: 50%;
}

缩略图图像

使用 border 属性创建缩略图。

缩略图：

实例

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

<img src="paris.jpg" alt="Paris">

作为链接的缩略图：

实例

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

居中图像

如需使图像居中，请将左右外边距设置为 auto 并将其设置为块元素：

实例

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

〔晴【天】º〕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记（十九）CSS 工具提示，图像样式

CSS 工具提示基础的工具提示创建一个鼠标移到元素上时显示的工具提示：实例<!DOCTYPE html><html><style>.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black;}.tooltip .tooltiptext { visibility: hidden; width: 120px; backgr
复制链接

扫一扫

专栏目录