在文章中呈現「浮出補充資訊」的效果 - 部落格

<style type="text/css">

a {color:#414141; text-decoration:none;}
a:hover{color:#4c7cbd; text-decoration:none;}
.title {
font-family: "Cooper Std Black";
font-size: 16px;
color:#333;
}
.overtitle{
font-family: "Cooper Std Black";
font-size: 16px;
color:#999;
}
</style>

<!-- 上面這段加到你CSS，調整自己想要的字體顏色，要顯示的文字用下面語法替代 -->

<div class="title" onmouseout="this.className='title'"
onmouseover="this.className='overtitle'" title="說明文字">
Google</div>

※ 引述《moonling0306 (摸尼)》之銘言：
: 目前在打訪談稿的文章，
: 因為訪談中有許多要另外補充的資訊，
: 之前是常用書籤來製作附註([1]、[2]、[3]....)，
: 不過想增加版面的易讀性，
: 想請問這種呈現方式如何操作？
: 舉例，「....家人在九二一地震不幸罹難，造成小明患有嚴重的PTSD....」
: 我想補充「PTSD」相關資訊，PTSD會顯示特別的格式(如字體、顏色...)
: 只要滑鼠移動「PTSD」，就會有資訊浮現出來(但不是另外跳出對話框或頁面)，
: 移開「PTSD」後，資訊又會自己消失。
: 想請問有人知道怎麼做這種效果嗎？謝謝。

--