在 HTML 中新增懸停文字

1. 在 HTML 中使用 title 屬性新增懸停文字
2. 在 HTML 中使用帶有 abbr 標籤的 title 屬性新增懸停文字

在本文中，我們將討論幾種在 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.