鼠標懸停tip效果如何用css實現？_Div+CSS教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
鼠標懸停tip效果，是一個非常有用的功能，在頁面布局受到局限的時候，我們不能往頁面中添加過多的內容。而鼠標懸停tip效果，可以在鼠標移上去的時候有一個提示信息，我們可以將相關的信息放置在這個tip中，不影響頁面美觀而又能很好的傳達信息。
應用div css布局，我們用CSS可以實現這樣的效果嗎？其實這很簡單，我們可以新建一個span或div，將之初始設置成：display:none，隱藏這一標簽的內容。
當鼠標移上去的時候，我們將此內容顯示出來。然后對其進行定位。就達到了鼠標懸停tip效果。
鼠標懸停tip效果實例 CSS代碼
示例代碼 [www.zhaotila.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;
}
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代碼
示例代碼 [www.zhaotila.cn]
<a id="tip" href="http://www.zhaotila.cn">【www.zhaotila.cn】
<span id="tip_info">
<img src="/uploads/divcss/logo3.gif"
alt="www.zhaotila.cn" width="200" height="90" />
</span>
</a>
<span id="tip_info">
<img src="/uploads/divcss/logo3.gif"
alt="www.zhaotila.cn" width="200" height="90" />
</span>
</a>
查看鼠標懸停tip運行效果
代碼調試框 [www.zhaotila.cn][ 可先修改部分代碼 再運行查看效果 ]
相關Div+CSS教程：
- 相關鏈接：
- 教程說明：
Div+CSS教程-鼠標懸停tip效果如何用css實現？
。