在實際開發中，我們會給圖片加上alt、給鏈接加上title，為了出故障預備，也可以提醒用戶的內容是什么，或僅僅是tip提示。今天我們介紹一款不錯的鼠標懸停TIP效果，圖片如下：

這樣的效果在實際開發中是非常有用的。我們可以為我們的鏈接加上這樣的效果，以更加體現網頁的親和力與易用性。我們也可以在提供下載的鏈接下提供這樣的tip提示。我們看這樣的鼠標懸停TIP效果是如何實現的。看下面的XHTML代碼：

Example Source Code []

Div CSS教程

Div CSS教程

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

Example Source Code []

* {

font-size:12px;

}

.tip{

position:relative;

color:#00c;

text-decoration:none;

}

.tip:hover{

background:none;

color:#000;

}

.tip span {

display:none;

}

.tip:hover span{

display:block;

position:absolute;top:26px;left:10px;

border-bottom:2px solid #eee;

border-right:2px solid #eee;

}

.tip:hover span p {

color:#f60;

text-align:left;

padding:5px;

border:1px solid #ccc;

background:#fff;

}

整體布局聲明，文字大小為12px。鏈接的文字及提示tip的文字均為12px。

定義類tip為相對定位，文字顏色為#00c。鏈接的提示下劃線為無。

類tip:hover效果，無背景色，文字顏色為#000。

在默認情況下，類tip下的span是不顯示的，即：display:none。

類tip:hover狀態下的span設置：

定義為塊元素，絕對定位于距上26px距左為10px。

下邊框與右邊框均為2px的實線，顏色為#eee。

這里是tip提示的最外邊框，此設置定位它的位置并形成了簡單的陰影效果。

類tip:hover狀態下的span里面的p的設置：

定義文字顏色為#f60，居左對齊。

填充為5px，使文字與邊框有一定的距離。

邊框為1px的實線，顏色為#ccc。背景色為白色#fff。

這里定義了tip文字的顯示，將tip四面形成實績邊框。

再加上前面span中定義了下邊框及右邊框，就勾勒出了tip提示的容器效果。

我們看最終的運行效果：

Source Code to Run []

[ 可先修改部分代碼 再運行查看效果 ]

總結

以上是生活随笔為你收集整理的html5页面中鼠标悬停效果,CSS实例：非常不错的鼠标悬停TIP效果！_div+css布局教程...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。