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

2016年11月29日 星期二

CSS:hover 各種表現形式及動態效果



CSS:hover 各種表現形式及轉場動態

CSS:hover可以有互動效果,加上父子、兄弟關係的運用,最後再附上轉場效果,就有能讓你驚豐的視覺豐富感。更重要的是,這一方法可以讓使用者有著 強大的思考空間,來創作。


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

css碼:

<style>
.hoverself1129 {
}

.hoverself1129:hover {
background: rgba(92, 173, 173, 0.6);
}
</style>


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

css碼:

<style>
.hoverself112902 {
}

.hoverself112902:hover >span {
color: red;
font-weight: bold;
}
</style>


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