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

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

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

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

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

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

示例代碼 [m.ghpqjb.com]

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.ghpqjb.com]

<a id="tip" href="http://m.ghpqjb.com">【m.ghpqjb.com】
<span id="tip_info">
<img src="/uploads/divcss/logo3.gif"
alt="m.ghpqjb.com" width="200" height="90" />
</span>
</a>

　　查看鼠標懸停tip運行效果