*YouTube 教學頻道* *影像布落格*
首頁
初學者技能專區
布落格寫作
小世界習作網
《台灣立報》

2016年1月20日 星期三

快速使用的CSS互動表現:hover

快速使用的CSS互動表現:hover
hover是使用CSS最常用到的互動技法。例如,下例,把滑鼠移到某一區塊,就可以產生背景色這種互動。

在說明數位文本何以異於「傳統文本」時,「互動性」往往被提出為是具 有決定性因素的重要文本 特色。

從早期文獻開始,互動性意識就是數位多媒體 (digital multimedia)/數位媒體(digital media)區隔於傳統多媒材媒體(multiple media)例如電視、電影,或是單一媒材媒體如小說,最重要差異之所在(Bhatnagar, 2002: 4;Miller, 2008: 54)。

互動在多媒體系統/文本的討論中一直「處於核心地位」(Barfield, 2004: 8),Bennett甚至說道:當閱聽眾能與媒介互動,「新媒體」的時代才走入歷史(Bennett, 2005: 9)。數位敘事寫作而言,「關於敘事之未來的大多數文獻中,互動性是一條黃金標準」(H.波特.阿博特/陳永國譯,2007:617)。

對網路新聞而言, Brighton & Foy強調二十一世紀的新聞,互動性將會成為重要的新聞價值指標(Brighton & Foy, 2007: 43);Bradshaw & Rohumaa亦言互動會是網路新聞的核心特色(Bradshaw & Rohumaa, 2011: 136)。

〔參考文獻click〕


影音教學:


影音教學使用之CSS:

<style>

/* 基本黑體內文 */
.ironcontent0120 {
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: normal;
line-height: 1.6;
text-align: left;
letter-spacing: 0.1em;
background-image: url(https://goo.gl/5kQ3dA);
background-repeat: no-repeat;
background-size: 24px;
background-position: right 5px bottom 5px;
}

/* 基本細明體文 */
.stdcontent0120 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.4;
text-align: left;
letter-spacing: 0.1em;
}

</style>





互動使用的CSS:

.transcolor {
}

.transcolor:hover {
background: rgba(208, 208, 208, 0.4);
}