在實(shí)際開發(fā)中，我們會(huì)給圖片加上alt、給鏈接加上title，為了出故障預(yù)備，也可以提醒用戶的內(nèi)容是什么，或僅僅是tip提示。今天我們介紹一款不錯(cuò)的鼠標(biāo)懸停TIP效果，圖片如下：


　　這樣的效果在實(shí)際開發(fā)中是非常有用的。我們可以為我們的鏈接加上這樣的效果，以更加體現(xiàn)網(wǎng)頁的親和力與易用性。我們也可以在提供下載的鏈接下提供這樣的tip提示。我們看這樣的鼠標(biāo)懸停TIP效果是如何實(shí)現(xiàn)的�？聪旅娴腦HTML代碼：


　　在鏈接A標(biāo)簽中，嵌套了span與p標(biāo)簽，這就是我們的tip的基本元素了，我們看CSS如何控制顯示它。CSS代碼如下：


　　整體布局聲明，文字大小為12px。鏈接的文字及提示tip的文字均為12px。
　　定義類tip為相對定位，文字顏色為#00c。鏈接的提示下劃線為無。

　　類tip:hover效果，無背景色，文字顏色為#000。
　　在默認(rèn)情況下，類tip下的span是不顯示的，即：display:none。

　　類tip:hover狀態(tài)下的span設(shè)置：
　　定義為塊元素，絕對定位于距上26px距左為10px。
　　下邊框與右邊框均為2px的實(shí)線，顏色為#eee。
　　這里是tip提示的最外邊框，此設(shè)置定位它的位置并形成了簡單的陰影效果。

　　類tip:hover狀態(tài)下的span里面的p的設(shè)置：
　　定義文字顏色為#f60，居左對齊。
　　填充為5px，使文字與邊框有一定的距離。
　　邊框?yàn)?px的實(shí)線，顏色為#ccc。背景色為白色#fff。
　　這里定義了tip文字的顯示，將tip四面形成實(shí)績邊框。
　　再加上前面span中定義了下邊框及右邊框，就勾勒出了tip提示的容器效果。

　　我們看最終的運(yùn)行效果：