山丘突歐[網頁] 用CSS 達到詳述功能
今天 nchild 問我怎樣達到沒見過壞人嗎？網頁上快速選單的說明功能，卻又不會像HTML 的 a Title=”要顯示文字” 顯示的這麼慢，稍微看一下，原來只是簡單的CSS就達成了，所以我也花了十分鐘在我的網站加入了這個好用的選單。
若朋友的網站也想加入這小功能，可以先加入下面的CSS
<style type="text/css">
/* Toolbar Tooltip */
a.tooltip, a.tooltip:link, a.tooltip:visited, a.tooltip:active {
position: relative;
text-decoration: none;
}
a.tooltip:hover {
background: transparent;
}
a.tooltip span {
display: none;
text-decoration: none;
}
a.tooltip:hover span {
display: block;
position: absolute;
z-index: 100;
color: #7D5B38;
border:1px solid #7D5B38;
background: #FFFFCC;
font: .9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
top: -30px;
cursor: crosshair;
padding: 5px;
}
</style>
接著拿我這個HTML去改就OK啦，一行Code 都沒寫到!
<div id="toolbar-left">
<a href="http://kent.ppolis.com/" class="tooltip"> | 回首頁<span>Home</span></a> |
<a href="http://kent.ppolis.com/?page_id=2" class="tooltip">關於山丘<span>About Kent</span></a> |
<a href="http://kent.ppolis.com/?page_id=53" class="tooltip">山丘公告<span> 不成篇文章的都放這</span></a> |
<a href="http://kent.ppolis.com/?page_id=43" class="tooltip">測試與寵物<span> 有的沒有的先放這</span></a> |
</div>
有時候程式人員總是習慣用JavaScript 思考，不過若用CSS轉個彎，也可以簡單的達到同樣的目的。這算是網頁程式的趣味分享吧！
Permalink 引用: http://kent.ppolis.com/wp-trackback.php?p=83
November 20th, 2006 at 10:32 pm
補充說明一下，title這個tag顯示過慢（約一秒）的問題是發生在Safari上，應該是瀏覽器預設值的關係。
November 21st, 2006 at 11:22 pm
版面是不是改了
我記得之前的是＂橘子色＂
還是我睡太少 想太多
November 22nd, 2006 at 11:45 pm
只有一個建議，可改用。不過用在這裡就算沒有inline也無妨的。
November 22nd, 2006 at 11:46 pm
… HTML被檔，用全形重po一次：
只有一個建議，〈span〉可改用〈div style=”display:inline”〉。不過用在這裡就算沒有inline也無妨的。
November 23rd, 2006 at 1:03 am
Dear rw:
你沒有睡太少，想太多，版面配色真的改了 (要不然就是我也睡太少，想太多… XD)
這個冷色系的配色不錯，和上頭的雪山滿搭的耶
November 23rd, 2006 at 2:40 am
不過 白色的底色+淡藍色(比#7D5B38更淡的色) 的配色怪怪的
有點傷眼睛 不想因此換螢幕(還在用CRT)
推薦用’網頁安全色”
jedi的這篇文章丟給你參考
http://jedi.org/blog/archives/002703.html
November 23rd, 2006 at 9:49 am
謝謝 RW兄 的建議
其實配色我也是去 http://kuler.adobe.com/ 找的.
這兩天實在事情多些..
花了二十分鐘改好css就幾乎沒在上來看了..
看來要再花二十分鐘把它改良一下了!
November 23rd, 2006 at 2:28 pm
Hi Takol
我剛剛試一下 inline 的效果. 覺得對話框跑來跑去會讓人煩躁.
所以又改回原來的了. 不過還是謝謝你.