CSS:hover 各種表現形式及轉場動態
CSS:hover可以有互動效果，加上父子、兄弟關係的運用，最後再附上轉場效果，就有能讓你驚豐的視覺豐富感。更重要的是，這一方法可以讓使用者有著 強大的思考空間，來創作。
教學影音 click!!
CSS:hover 自身互動
互動在多媒體系統／文本的討論中一直「處於核心地位」（Barfield, 2004:
8），Bennett甚至說道：當閱聽眾能與媒介互動，「新媒體」的時代才走入歷史（Bennett, 2005:
9)。數位敘事寫作而言，「關於敘事之未來的大多數文獻中，互動性是一條黃金標準」（Ｈ．波特．阿博特／陳永國譯，2007：617）。
css碼：
<style>
.hoverself1129 {
}
.hoverself1129:hover {
background: rgba(92, 173, 173, 0.6);
}
</style>
CSS:hover 父子關係
互動在多媒體系統／文本的討論中一直「處於核心地位」（Barfield, 2004:
8），Bennett甚至說道：當閱聽眾能與媒介互動，「新媒體」的時代才走入歷史（Bennett, 2005:
9)。數位敘事寫作而言，「關於敘事之未來的大多數文獻中，互動性是一條黃金標準」（Ｈ．波特．阿博特／陳永國譯，2007：
617）。
css碼：
<style>
.hoverself112902 {
}
.hoverself112902:hover >span {
color: red;
font-weight: bold;
}
</style>
教學影音 click !
CSS:hover 兄弟關係
互動在多媒體系統／文本的討論中一直「處於核心地位」（Barfield, 2004:
8），Bennett甚至說道：當閱聽眾能與媒介互動，「新媒體」的時代才走入歷史（Bennett, 2005:
9)。數位敘事寫作而言，「關於敘事之未來的大多數文獻中，互動性是一條黃金標準」（Ｈ．波特．阿博特／陳永國譯，2007：
617）。
<style>
.hoverbro1129 {
border-left: 2px solid transparent;
}
.hoverbro1129:hover +div {
border-left: 2px solid darkred;
padding-left: 2em;
}
</style>
補充說明：當中間有 <br>段行空白，請加+br
.hoverbro1129:hover +br +br +div {
color: red;
}
補充說明：想要有動態效 果，請加入下列css碼
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-ms-transition: 1s;
transition: 1s;
創作範例：
 |
 |
CSS碼：
<style>
.tdimgup1129 >img {
position: relative;
top: 0px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
.tdimgup1129:hover >img {
top: -15px;
}
</style>
