考虑您的表单使用自定义单选按钮的场景。这些单选按钮应用了以下 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 - 但它必须尽可能简单。
谢谢!
最佳答案
使用 jQuery 修改您的 fiddle 以将 mousedown
事件附加到按钮。此外,我将图像转换为使用 background-image
,这样鼠标光标移动时就不会出现重影图像。只是一个轻微的可选改进。
关于javascript - 移动时可选择的单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39706972/