單選按鈕在移動時可選

考慮一種情況，表單使用自定義單選按鈕。這些單選按鈕有以下CSS應用於它們 - 這產生了可選圖像的錯覺 - 根本沒有js。單選按鈕在移動時可選

#ImageSelector label > input{ /* HIDE RADIO */ 
    display:none; 

} 
#ImageSelector label > input + img{ /* IMAGE STYLES */ 
    cursor: pointer; 
    border: 2px solid transparent; 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
} 
#ImageSelector label > input + img:hover{ /* (CHECKED) IMAGE STYLES */ 
    opacity: 1.0; 
    filter: alpha(opacity=100); 
    border:2px solid #00a8ff; 
} 

#ImageSelector label > input:checked + img{ /* (CHECKED) IMAGE STYLES */ 
    opacity: 1.0; 
    filter: alpha(opacity=100); 
    border:2px solid #0184c8; 
}

當用戶嘗試點擊圖像並且光標仍在移動時，會出現該問題 - 該項目不會被點擊。這是典型的單選按鈕的預期行爲。有沒有一種快速的方法使單選按鈕對點擊動作更加「敏感」，或者在鼠標光標移動時可點擊？

UPDATE：https://jsfiddle.net/7aLbgqr6/

此外，該解決方案可以肯定包括jQuery的 - 但它必須儘可能簡單。

謝謝！

來源

2016-09-26 Joe

Onmousedown event？ –

你可以做一個jsfiddle嗎？ – evu

你是否想保持這個沒有JS？也許嘗試使用'：focus'或'：active'？ – Adjit

修改你的小提琴，將mousedown事件附加到使用jQuery的按鈕上。此外，我將圖像轉換爲使用background-image，以便在鼠標光標移動時不會出現重影圖像。只是輕微的可選改進。

https://jsfiddle.net/kpLLr03y/6/

來源

2016-09-26 16:15:16

請注意更新的小提琴網址。但是，利用mousedown事件覆蓋可能是解決方案。我會繼續測試。 – Joe

太好了。如果它幫助了你，你會介意接受這個答案嗎？ –

我會一旦廣泛的測試證實這是解決方案。 – Joe

單選按鈕在移動時可選

回答

相關問題