Question

我有复选框，我为标签设置了图像，我使用的代码在悬停时应用效果。然而，当在小提琴中进行测试时，悬停效果会在选中后保留，并且不会显示实际的复选框，只有小提琴的问题是这只适用于最后一次检查而不是全部检查。

但是，当我将此应用到我的网站时，只有悬停效果有效，效果不会停留在任何选定位置，并且勾选框保持可见。

我的代码中唯一的区别是它所在的DIV也有类，我使用bootstrap。

HTML：

<div id="sites" class="navbar navbar-inverse" style="padding:5px">

    <input type="checkbox" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" /></label>
    <input type="checkbox" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label>
    <input type="checkbox" name="site" id="su" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>

</div>

CSS：

.input_hidden {
    position: absolute;
    left: -9999px;
}

.selected {
    background-color: #ccc;
}

#sites label {
    display: inline-block;
    cursor: pointer;
}


#sites label:hover {
    background-color: #ccc;
}

#sites label img {
    padding: 3px;    
}

JS：

<script>
  $('#sites input:checkbox').addClass('input_hidden');
  $('#sites label').click(function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  });
</script>

所以我的问题有点像2，我有一个小提琴，它可以做我想要的东西，然后当我实现它时，我所做的小提琴并不完整。

我假设我可能有一些css与我试图做的相矛盾，但我不知道如何或者是什么。

非常感谢任何帮助-Tom

Answer 1

您只能使用CSS伪类:checked并定位下一个兄弟标签：

input[type=checkbox]:checked + label img

最后，您应该使用CSS规则：

#sites label:hover img,
#sites input[type=checkbox]:checked + label img {
    background-color: #ccc;
}

DEMO jsFiddle

仅供参考，在某些情况下，您可能希望使用而不是像{j}这样的checkboxes radio按钮：

http://jsfiddle.net/Zgh24/1173/

这可以让你在一些元素上使用持久样式，只使用CSS和单选按钮hiddden：

http://jsfiddle.net/Zgh24/1174/

Answer 2

可能不确定..类.selected由bootstrap核心使用，并且该样式应用于label元素。

使用浏览器查看应用的样式。

复选框图像标签选择仅适用于悬停的效果，而不是选中时

2 个答案: