在 HTML 中新增懸停文字

Subodh Poudel 2023年2月19日 2022年6月15日
  1. 在 HTML 中使用 title 屬性新增懸停文字
  2. 在 HTML 中使用帶有 abbr 標籤的 title 屬性新增懸停文字
在 HTML 中新增懸停文字

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

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn