以checkbox設計了一個元件
並用label去顯示(隱藏原生checkbox樣式)
我希望能達到
移入元件的時候顯示a圖片
移出時顯示b圖片
若使用者點擊則會使checked==true,並顯示c圖片
又若該元件已符合checked==true,則移入移出不會有更換圖片的動作
(維持顯示c圖片)
目前用mouseover和mouseout搭配checkbox的.prop('checked')做判斷及設定
但在使用操作上ui仍然不能照我想要的顯示
請問各位高手,該用什麼方法達成我的目標?
不透過js也是可以的
[html]
<label>
<input type="checkbox" id="test" name="test" />
<img id="image_a"/>
<img id="image_b"/>
<img id="image_c"/>
</label>
[css]
input#test,
img[id^=image_] {
display: none;
}
label:hover >
input#test:not(:checked) ~ img#image_a,
label:not(:hover) >
input#test:not(:checked) ~ img#image_b,
label >
input#test:checked ~ img#image_c
{
display: block;
}