html5頁面中如何實現鼠標懸停效果

這篇文章主要介紹了html5頁面中如何實現鼠標懸停效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　這樣的效果在實際開發中是非常有用的。我們可以為我們的鏈接加上這樣的效果，以更加體現網頁的親和力與易用性。我們也可以在提供下載的鏈接下提供這樣的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提示的容器效果。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“html5頁面中如何實現鼠標懸停效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!