无标签扩展chechbox可点击区域

Question

我的代码如下所示：

<div class="hovereffect">
    <img class="img-responsive" src="/some-image" alt="">
    <input type="checkbox" class="img-checkbox">
</div>

.hovereffect {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}

.hovereffect .img-checkbox{
    position: absolute;
    width: 18px;
    height: 18px;
    top: 3px;
    right: 5px;
    cursor: pointer;
}

因此，图像右上角有一个复选框，并希望将可点击的图像扩展到整个图像，以获得更好的用户体验。

如您所见，复选框没有标签，我希望在没有标签的情况下实现目标。

我尝试了使用:: after元素的技巧，但它与chrome一起使用但并不是真正使用firefox而且我无法使可点击区域响应，也就是说，延伸到图像的整个区域。

Answer 1

你能使用Javascript / jQuery吗？

您可以先为每张图片分配唯一的id（例如： img1，img2，img3 ）以及与图片相关的每个复选框（例如： img1-复选框）。然后您可以使用以下代码：

$('#img1').click( $('#img1-checkbox').attr('checked', true); );

或类似的东西。

Answer 2

这已经是problem很长一段时间了，而你只是不能用纯css实现你的目标。完成此任务的唯一方法是使用label或jquery/javascript或:after伪类。

如果您想展开复选框尺寸，请尝试以下操作：

.hovereffect input[type=checkbox]
{
  width:100px !important; //adjust as per need
  height:100px !important; //adjust as per need
}

这将增加复选框字段的可点击区域。 Working Link

但是，如果您希望checkbox 透明并显示背后的图像，则必须使用标签并将其背景颜色设置为透明。

我正等着看到有人用工作代码证明我错了。