单选按钮在移动时可选

考虑一种情况，表单使用自定义单选按钮。这些单选按钮有以下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

单选按钮在移动时可选

回答

相关问题