移動中にラジオボタンを選択可能

Question

フォームでカスタムラジオボタンを使用するシナリオを考えます。これらのラジオボタンには、次の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のを含めることができます - しかし、それは可能な限り単純にしなければなりません。

ありがとうございます！

Answer 1

mousedownのイベントをjQueryを使用してボタンに添付するように修正しました。さらに、代わりにbackground-imageを使用するように画像を変換して、マウスカーソルの移動時にゴースト画像が表示されないようにしました。わずかなオプションの改良。

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