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

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

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

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

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

　　鼠標(biāo)懸停tip效果實(shí)例 CSS代碼

示例代碼 [www.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;
}

　　鼠標(biāo)懸停tip效果實(shí)例 XHTML代碼

示例代碼 [www.hl5o.cn]

　　查看鼠標(biāo)懸停tip運(yùn)行效果