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将mousedown事件附加到按钮上。此外，我将图像转换为使用background-image，以便在鼠标光标移动时不显示重影图像。只是一个轻微的可选改进。

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

移动时可选择的单选按钮

1 个答案: