小額資訊量的快速互動補充：純CSS互動範例

本書專心回答一個再基本的不過的問題：到底要教給同學 more... 什麼樣的數位技能？為什麼是選這個而不是選那個？而選上 了這個有什麼可被解釋的理由嗎？這理由與「新聞敘事」有什麼關系？這些數位技能要如何使用？怎麼用得好！

數位文本常常要對某些訊息做小額量的資訊補充。例如，一 個簡短的圖說之後，可以透過互動 機制，迅速為「圖說」加上額外的補充說明。如果「作者」在寫作的判斷上覺得「讀者」會想要知道的更多。
本文的互動機制，可以「快速」補充少量的訊息。更重要的是，互動機制帶出的訊息，並不會干擾、影響原先的排版樣式。

一、請先做出一個設有長度和寬度的Div 文本區塊，影音教學： 這是一開始在頁面出現的Div，所以要把寬度和高度決定好。 請一定要記得為這個 Div文本區塊設定 ID 代碼。 如用kompoZer編輯，請拉一下長度和高度設定框，就會把Div的長、寬設定好了。

二、請先複置下列可產生互動效東的CSS碼，並貼於< body>之後： <style> #k001 >div { width: 191px; height: 205px; overflow: hidden; position:relative; z-index: 99; font-family: Verdana, '微軟正黑體'; font-size: 1.02em; font-weight: normal; line-height: 1.6em; text-align: left; letter-spacing: 0.1em; border: 1px solid transparent; padding: 0.5em 1em 0.5em 1em; } #k001:hover >div { height: auto; overflow: hidden; border: 1px solid black; background-color: beige; -webkit-box-shadow: 2px 2px 2px 2px silver; } </style> 請把步驟一的div文本區塊所設的 id 代碼寫入到CSS中，即二個紅色字體者。 同樣的，把上步驟的Div的長、寬值，都同樣的寫入到此CSS中，即藍色字體者。

三、Copy下列語法，把你的內容填進去，並置入於步驟一的Div內。 <div > ﹛可以是一張照片﹜ 放入想你要的全部文字。放入想你要的全部文字。<br> 本文的互動機制，可以「快速」補充少量的訊息。更重要的是，互動機制帶出的訊息，並不會干擾、影響原先的排版樣式。<br> </div> 把你所有想呈現的資料通通放進去。 可以把照片放在最前面，就會如同本篇範例一樣的效果。 可以重新調整開始呈現時的高度和寬度。記住：要同時調整步驟一有id的div寬度和高度，以及和步驟二的CSS寬度和高度即可。請看教學影片。