CSS實例:非常不錯的鼠標懸停TIP效果!_DIV+CSS實例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
在實際開發中,我們會給圖片加上alt、給鏈接加上title,為了出故障預備,也可以提醒用戶的內容是什么,或僅僅是tip提示。今天我們介紹一款不錯的鼠標懸停TIP效果,圖片如下:
這樣的效果在實際開發中是非常有用的。我們可以為我們的鏈接加上這樣的效果,以更加體現網頁的親和力與易用性。我們也可以在提供下載的鏈接下提供這樣的tip提示。我們看這樣的鼠標懸停TIP效果是如何實現的。看下面的XHTML代碼:
在鏈接A標簽中,嵌套了span與p標簽,這就是我們的tip的基本元素了,我們看CSS如何控制顯示它。CSS代碼如下:
整體布局聲明,文字大小為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提示的容器效果。
我們看最終的運行效果:
代碼調試框 [www.ghpqjb.com]
[ 可先修改部分代碼 再運行查看效果 ]

這樣的效果在實際開發中是非常有用的。我們可以為我們的鏈接加上這樣的效果,以更加體現網頁的親和力與易用性。我們也可以在提供下載的鏈接下提供這樣的tip提示。我們看這樣的鼠標懸停TIP效果是如何實現的。看下面的XHTML代碼:
示例代碼 [www.ghpqjb.com]
<a class="tip" href="#">Div CSS教程<span><p>MB5U.com Div CSS教程</p></span></a>
在鏈接A標簽中,嵌套了span與p標簽,這就是我們的tip的基本元素了,我們看CSS如何控制顯示它。CSS代碼如下:
示例代碼 [www.ghpqjb.com]
* {
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;
}
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提示的容器效果。
我們看最終的運行效果:
代碼調試框 [www.ghpqjb.com][ 可先修改部分代碼 再運行查看效果 ]
相關DIV+CSS實例:
- 相關鏈接:
- 教程說明:
DIV+CSS實例-CSS實例:非常不錯的鼠標懸停TIP效果!
。