使用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>

語法效果：

請按我產生互動：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的後面。才會有作用。