精準控制互動物件：CSS選擇器：自身、父子、兄弟關係選擇

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>