卡卡網(wǎng)

當(dāng)鼠標(biāo)移到文字上，需要顯示提示文字時，只需給標(biāo)簽加上“title”屬性。但是這種文字提示在外觀上不夠好看，如果想要一個更加美觀的文字提示樣式，那么本文介紹的鼠標(biāo)提示插件【純css實(shí)現(xiàn)】一定是一個很好的選擇。

鼠標(biāo)提示插件【純css實(shí)現(xiàn)】

這個插件名稱叫hint.css，該文件在本文源碼下載壓縮包里，下面介紹該插件的用法。

Hint.css是css中的工具提示（Tooltip）庫，可幫助您向頁面的任何元素添加很酷的工具提示。hint.css和其他工具提示插件的主要區(qū)別在于hint.css使用data-*屬性、偽元素、內(nèi)容屬性和css3轉(zhuǎn)換，因此它只能與完全支持html5和css3的現(xiàn)代瀏覽器兼容。

如何使用？

1、在網(wǎng)頁上包含Hint.css文件

<link rel="stylesheet" href="hint.css">

2、用至少2個類標(biāo)記鏈接。使用數(shù)據(jù)提示屬性添加工具提示文本。

<p> <a href="#" class="hint hint--top" data-hint="hint--top">JQuery append() Create and Apply CSS</a> </p>

提示文本

3、位置選項

class="hint hint--top"
class="hint hint--bottom"
class="hint hint--left"
class="hint hint--right"

4、另外，你還可以使用其他的文字提示

hint--error
hint--info
hint--warning
hint--success
hint--always

execcodegetcode

標(biāo)簽: 鼠標(biāo)提示  css