滑鼠移至上方tip效果如何用css實現？

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

應用div+css布局，我們用CSS可以實現這樣的效果嗎？其實這很簡單，我們可以建立一個span或div，將之初始設定成：display:none，隱藏這一標籤的內容。（關於display可以參考這裡）當滑鼠移上去的時候，我們將此內容顯示出來。然後對其進行定位。就達到了滑鼠移至上方tip效果。

滑鼠移至上方tip效果執行個體 CSS代碼

代碼如下	複製代碼
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代碼

代碼如下	複製代碼
<a id="tip" href="http://">【】 <span id="tip_info"> <img src="/upimg/20070505/11N303A514022551.jpg"  alt="" width="200" height="90" /> </span> </a>