javascript - 复选框图像标签选择仅在悬停时应用的效果，未选中时

我有为标签设置图像的复选框，并且我使用的代码是将鼠标悬停时会产生效果的代码。但是，在小提琴中进行测试时，选中时悬停效果将保持不变，并且不显示实际的复选框，唯一的问题是小提琴只能在最后检查的选项中使用，而不能全部选中。

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

小提琴：http://jsfiddle.net/Zgh24/1169/

我的代码之间的唯一区别是它的DIV也有类，我正在使用引导程序。

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冲突的css，但是我不知道如何或什么。

任何帮助都非常感激-汤姆

最佳答案

您只能使用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

仅供参考，您可能希望在某些情况下使用jsFiddle中的checkboxes radio按钮代替：

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

这样可以让您仅使用隐藏了单选按钮的CSS在某些元素上使用持久性样式：

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