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的後面。才會有作用。