鼠標懸停tip效果如何用css實現(xiàn)？_Div+CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　
　　鼠標懸停tip效果，是一個非常有用的功能，在頁面布局受到局限的時候，我們不能往頁面中添加過多的內(nèi)容。而鼠標懸停tip效果，可以在鼠標移上去的時候有一個提示信息，我們可以將相關(guān)的信息放置在這個tip中，不影響頁面美觀而又能很好的傳達信息。

　　應(yīng)用div css布局，我們用CSS可以實現(xiàn)這樣的效果嗎？其實這很簡單，我們可以新建一個span或div，將之初始設(shè)置成：display:none，隱藏這一標簽的內(nèi)容。

當(dāng)鼠標移上去的時候，我們將此內(nèi)容顯示出來。然后對其進行定位。就達到了鼠標懸停tip效果。

　　鼠標懸停tip效果實例 CSS代碼

示例代碼 [m.hl5o.cn]

a#tip {position:relative;left:30px;top:30px;}
a#tip:link {text-decoration:none;color:#c00;display:block}
a#tip:hover {text-decoration:none;color:#000;display:block}
a#tip span {display:none;}
a#tip:hover #tip_info {
display:block;
border:1px dashed #c00;
background:#fff;
padding:1px;
position:absolute;
top:0px;
left:120px;
}

　　鼠標懸停tip效果實例 XHTML代碼

示例代碼 [m.hl5o.cn]

　　查看鼠標懸停tip運行效果