在 HTML 超連結上新增可互動的 ToolTip

2021-10-02 10:02:15 字數 927 閱讀 6324

當滑鼠滑過超連結的那一刻,我們都能想象出乙個熟悉的白色提示框從滑鼠指標所在的位置淡入。那是 tooltip 提示框。html 中我們能通過簡單的屬性設定獲得 tooltip,但如果希望 tooltip 是能互動的,那麼就閱讀本文吧!

先來看看 html 原生自帶的 tooltip:

請將滑鼠划至這裡

**非常簡單:

title

="你看到了什麼?對,這就是原生自帶的 tooltip!"

href

="#"

>

請將滑鼠划至這裡a

>

可互動的 tooltip 就沒那麼幸運了,沒有自帶。於是,我們可考慮通過自己拼接的 html 容器來實現。效果像這樣:

請將滑鼠划至這裡

這是 內部的鏈結哦

這是靠一組 html 容器和一些配套的 css 來實現的。

class

="tooltip"

>

>

href

="">

請將滑鼠划至這裡a

>

span

>

class

="tooltip-text"

>

這是href

="">

內部的鏈結哦a

>

span

>

span

>

.tooltip .tooltip-text

.tooltip:hover .tooltip-text

本部落格(底部的版權資訊中使用到了這種互動式 tooltip。

我的部落格會首發於 而 csdn 會從其中精選發布,但是一旦發布了就很少更新。

HTML 超連結的路徑及建立超連結

超連結有兩個路徑,分別是絕對路徑和相對路徑。1.1絕對路徑 絕對路徑指從根目錄開始查詢一直到檔案所處位置所經過的所有目錄,目錄名之間用反斜槓 隔開。比如存在電腦c盤的乙個檔案的絕對路徑是從碟符開始的然後途經找到該檔案的所有目錄。1.2相對路徑 相對路徑指相對於自己的目標檔案位置。比如乙個專案中存在a...

在CSDN的Markdown中新增超連結

如果想給鏈結加上title文字,只要在 後面,用雙引號把 title 文字包起來即可。但是行內式超連結,預設是在本視窗開啟的,為了有更好的閱讀體驗,我們往往希望在新視窗開啟超連結,並不希望影響閱讀本文。markdown目前應該還不支援這種語法。拋棄markdown中的行內式鏈結的語法。自己動手在需要...

HTML中的超連結

1 模式 或稱協議 常見的協議有 編碼描述 超文字傳輸協議資源 hypertext transfer protocol 用安全套接字層傳送的超文字傳輸協議 file 本地或網上分享的檔案 2 伺服器名稱 或ip位址 後面有時還跟乙個冒號和乙個埠號。3 路徑和檔名 href title target ...