javascript - 移动时可选择的单选按钮

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;
}

当用户尝试单击图像并且光标仍在移动时会出现问题 - 该元素不会被单击。这是典型单选按钮的预期行为。有没有一种快速的方法可以使单选按钮对单击操作更加“敏感”或在鼠标光标移动时可单击？

更新: https://jsfiddle.net/7aLbgqr6/

此外，该解决方案绝对可以包含 jQuery - 但它必须尽可能简单。

谢谢!

Answer 1

使用 jQuery 修改您的 fiddle 以将 mousedown 事件附加到按钮。此外，我将图像转换为使用 background-image，这样鼠标光标移动时就不会出现重影图像。只是一个轻微的可选改进。

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