作者tracetw (tracetw)
看板Blog
標題Re: [Blogger] 在文章中呈現「浮出補充資訊」的效果
時間Sun Feb 3 13:42:21 2013
<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」後，資訊又會自己消失。
: 想請問有人知道怎麼做這種效果嗎？謝謝。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 111.255.164.246
※ 編輯: tracetw 來自: 111.255.164.246 (02/03 13:59)
1F：推 moonling0306:謝謝，這幾天會試試看。 02/04 10:58
2F：推 eddy1221:好棒的資訊我也要來試試 02/04 14:29