迹忆客 专注技术分享

在本文中，我们将讨论几种在 HTML 中添加悬停文本的方法。悬停文本是当我们将鼠标悬停在 HTML 中的文本上时出现的工具提示文本。

在 HTML 中使用 title 属性添加悬停文本

我们可以使用 title 属性在 HTML 中添加悬停文本。该属性可以与任何 HTML 元素一起使用。

它提供了有关元素的额外信息。当我们在元素上使用 title 属性时，当我们将鼠标移到元素上时，它会创建工具提示文本或悬停文本。

例如，创建一个带有 <button> 标签的 Login 按钮。在 <button> 标签中写一个属性 title。

接下来，将文本 this is a login button 写入 title 属性的值。

当我们将鼠标悬停在按钮上时，悬停文本会显示这是一个登录按钮。在这里，我们用一个按钮实现了 title 属性，一个内联元素。

这样，我们可以使用 title 属性在 HTML 中添加悬停文本。

示例代码：

<button title="this is a login button">
  Login
</button>

在 HTML 中使用带有 abbr 标签的 title 属性添加悬停文本

这个方法讨论了我们如何在使用 abbr 标签的同时使用 title 标签添加悬停文本。title 属性和 abbr 通常一起使用。

abbr 标签用于书写缩写，title 标签用于在鼠标悬停时显示缩写的完整形式。

例如，考虑句子 The Undertaker is a WWE superstar。用 abbr 标签包裹单词 WWE。

在标签中，写下属性 title 并赋予其值 World Wrestling Entertainment。

结果，单词 WWE 出现时带有虚线下划线。当我们将鼠标悬停在它上面时，会出现一个悬停文本，上面写着 World Wrestling Entertainment。

因此，这就是我们如何使用带有 abbr 标签的 title 属性在 HTML 中创建悬停文本。

示例代码：

The Undertaker is a <abbr title="World Wrestling Entertainment"> WWE </abbr> superstar.

The Undertaker is a WWE superstar.