數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎圖像編輯:GIMP
數位影音敘事專題寫作
影音新聞製作與剪輯(上課用)
基礎新聞攝影(上課用)
數位新聞排版
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2020年12月16日 星期三

使用CSS來達到click效果




使用CSS來達到click效果

CSS的功能中,目前並沒有click這項互動的功能。

我們往往要使用javascript來達到click這互動功能的創作。

但如果你想用CSS來達成click這互動動作的功能,還是有一些方法可來模擬出來。


範例演練

CSS語法:

<style>
input#test1216:checked ~#testchk1216 {
color: red;
}
</style>
<input id="test1216" type="checkbox"><label for="test1216">請按我產生互動:div字變顏色...</label><br>
123
<br>
<div id="testchk1216" style="border: 1px dotted gray; font-size: 1.2em; font-weight: bold;">這裡是要變化顏色的字
</div>

語法效果:


123
這 裡是要變化顏色的字


語法說明

<input id="A" type="checkbox"><label for="A">文字</label>

這裡是指,你對label所做的動作,就會等同於對input的動作。

所以我們在【文字】上click,就等同於對 input 進行 click(checkbox產生作用)。這中間是用 for 以及 id 來連結起來。

再來我們看CSS。

input#test1216:checked ~#testchk1216
 {
color: red;
}

當 input 的 click 動作被確認時(:checked),在其後面同層的元素中如果有 id 是  testchk1216 的元素(~#testchk1216),此例是 div,則會產生字體顏色變化(color: red;)。


再看另一範例





注意:

要變化的元素,一定要放在input的後面。才會有作用。