扩展chechbox可点击区域无标签

我的代码如下所示：扩展chechbox可点击区域无标签

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

所以在右上角在图像上的复选框，并希望延长可点击的是对整个图像更好的用户体验。

正如你所看到的复选框没有标签，我想实现没有标签的目标。

我试过使用::之后的元素，有点用铬但不真正与Firefox，我不能让可点击区域响应，也就是说，延伸到图像的整个区域。

来源

2016-07-27 Adnan Mujkanovic

你能使用Javascript/jQuery吗？

您可以通过给你（例如：IMG1，IMG2，IMG3）每幅图像分配唯一id开始，每一个复选框，相关的图像（例如：IMG1-复选框）。然后，你可以使用代码如下：

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

或类似的东西。

来源

2016-07-27 12:24:20 davidgagnedesign

事情是它的一个媒体库im建设，有很多图像，所以我需要添加独特的类名到所有图像。你的建议很好。我可以用jquery/js来完成，但是可能用css解决了太多不必要的js代码。对？ –

'class'对于一组元素是共同提及的，'id'是针对单个元素（唯一的）。所以，你可以给你的图像分配'id'，然后在你的jQuery代码中使用** id **。 –

这已经是一个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是透明并显示后面的图像，那么你将不得不使用标签，并设置它的背景颜色为透明。

我在等着看别人用工作代码证明我错了。

来源

2016-07-27 13:26:24

扩展chechbox可点击区域无标签

回答

相关问题