鍍金池/ 問答/HTML/ 點擊checkbox 切換其背景

點擊checkbox 切換其背景

clipboard.png

clipboard.png
被選中時

clipboard.png
hover

clipboard.png
未選中時

checkbox隱藏,設(shè)置一個偽類box,并根據(jù)hover checked 不勾選等操作,顯示上圖的相應(yīng)位置圖片。

我弄了半天,都只能顯示一個位置圖出來,不能根據(jù)我的操作切換位置圖。點擊沒有反應(yīng)。
還請各位指點一二。
追加1:
現(xiàn)在通過 class名:hover{} 可以切到hover位置的紅色框了 但是checked disabled checked.disabled還是不知道怎么解決

回答
編輯回答
半心人

為什么不用button元素?
button元素可以用onclick屬性啊。

2018年7月18日 17:37
編輯回答
陪我終

隱藏checkbox的input
使用label標(biāo)簽來控制checkbox的input元素
把checkbox置于label前面 再用checkbox的checked偽類和+選擇器來切換label的樣式
如果還要控制后面同級別的元素 可以使用~選擇器

寫了個簡單的例子,如下:

https://jsfiddle.net/7uqd3vex/8/

2017年2月11日 09:28