*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2014年5月30日 星期五

為資訊加入互動性補充說明:CSS兄弟選擇及hover的綜合應用



這是中標/摘要,或是較為簡短的段落大意。
也可以是圖文整合型的文本, 只要是在Div內就可以。
CSS兄弟選擇(+)以及hover的綜合應用。
mouseover...[absolutely simple]
這是內文。換言之,要對上面div區域再加以補充說明的資料/訊息。
一般而言,在螢幕閱讀之下,一開始的掃瞄過程,文字太多會妨礙掃瞄性的快速閱讀理解。所以用較少的文字摘要來讓讀者快速掌握大意。
一旦讀者有與趣了,我們再來就可以利用互動機制,來對摘要文字加以補充說明。這時,就可以滿足讀者在互動文本中對內容的進一步要求。


一、請用KompoZer做出兩個 div,以形成互動,請看教學影音:

  1. 先做出兩個緊鄰的div,上面的是摘要,下方的是補充性內文。
  2. 第一個div要記得給上id的代碼。
  3. div內可以是任何html可以呈現的資料。
二、請於<body>之後加入下列的CSS,就可以形成互 動功能:

<style>
#div2014053001 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
letter-spacing: 0.1em;
padding: 1em;
}
#div2014053001+div { // + 符號是css兄弟選擇器
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: normal;
line-height: 1.8em;
text-align: left;
letter-spacing: 0.1em;
margin-top: 1em;
padding: 1em;
border-bottom: 2px solid darkorange;
display: none;
}

#div2014053001:hover {
background-color: darkorange;
}
#div2014053001:hover+div { // hover互動後,作用於其後的兄弟DIV
display: block;
}
</style>
三、注意事項:
  1. 要做第二組互動文本時,記得要更換新的id(紅色 字)。
  2. +div綠色字)的那組 css,即是控制第二個div的CSS。
  3. :hover藍色字)的那組 css,是控制滑鼠移入時的動作。



沒有留言:

張貼留言