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

Checkbox image label Select effect only applying on hover, not when checked

本文关键字：悬停 适用于 标签 图像 选择 复选框      更新时间：2023-09-26

我有复选框，我有图像设置的标签，我使用的代码应用的效果时悬停。然而，当在一个提琴测试悬停效果停留时，选择，不显示实际的复选框，提琴的唯一问题是，这只适用于最后选中，而不是所有选中。

然而，当我将这个应用到我的网站时，只有悬停效果有效，效果不会停留在任何选择上，并且复选框保持可见。

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

在我的代码中唯一的区别是它所在的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

您可以只使用CSS伪类:checked并瞄准下一个兄弟标签:

input[type=checkbox]:checked + label img

最后，你应该使用如下CSS规则:

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

仅供参考，您可能希望在某些情况下使用checkboxes radio按钮，而不是在这个jsFiddle:

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

可以让你在某些元素上使用持久化样式，只使用隐藏单选按钮的CSS:

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

可能不确定…类.selected被bootstrap core使用，并且该样式被应用到标签元素。

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

相关文章：