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，是控制滑鼠移入時的動作。


沒有留言:

張貼留言