利用 css 來做到 title/alt 的功能《by 童顏未老人》

　剛剛試出一個或許對眾高手來說，是很簡單而且不太入流的技術，不過這可是我弄了好久才學到的。特別記錄下來免的以後會忘了。

　是這樣的，我希望在網頁上當使用者將滑鼠移動到某個物件上面時，右下方就會跳出一個簡單的說明，如下圖：

　這原本是不難的，只要用 title 這屬性就可以作到了，但是那樣的話，字會很小，而且沒什麼變化，對年繼大的人來說頗不友善的。於是我便動到 css 的頭上，再參考到網路上一個高手的作法，我略加修改一下，就相當的適合我用了。

首先定義一下 css 的部份

<style type="text/css">
.info {position:relative;}
.info:hover {background:#eee;color:#333;}
.info span {display: none }
.info:hover span {
       display:block;
    position:absolute;
    top:30px;
    left:60px;
    width:400px;
       border:1px solid #ff0000; 
    background:#FDFFB4; 
    color:#000000;
    padding:5px;
    text-align:left;
    z-index:9;
    text-decoration:none;}
</style>

然後對於 目標的地方修改 如下：

<a href="../News/List.phtml?StarID=<?echo $StarID?>" class="info">
 <img src="../images/bt042.gif" name="Image0_4" 
     id="Image0_4" width="92" height="26" border="0">
 <span>隨時將五大星球最新的資訊及活動傳達給您。</span></a>

主要的用意便是，想透過 <a> </a>裏面所包的 <span> 來顯示出那段說明。但是當游標尚未進入前，這段 span 先用 display:none; 來讓它隱藏起來。

當滑鼠的游標進入標的時，再用 display:block;的方式讓它出現，並在設定一下表現方式 ( 離游標的位置、字體、顏色‧‧‧ )

當然了 <a> 元素不要忘了設定一下 class="info" ！

還有 info 本身要設定為 position:relative; ，否則那個說明會固定在畫面的左上角！

這樣就可以達到我想要的目標！ :)