0

我有三个带有三个复选框的 div 块，当我单击每个复选框时，我想更改 div 块的背景颜色。

当我尝试这个时：

<style type="text/css">

.calendar-content {
    float: left;
    width: 100%;
    min-height: 112px;
    border: 1px solid #ccc;
    position: relative;
    display: block;
    margin-top: -1px;
}

.checkbox input[type="checkbox"] {
    margin-top: 1px;
    width: 20px;
    height: 20px;
    margin-left: -24px;
    padding-left: 24px;
}


.checkbox:checked ~ .calendar-content {
  background: #CCC;
}
</style>



<div class="calendar-content checkbox">
    <input type="checkbox" id="select_campaign" style="margin-left: 20px; margin-top: 28px; float: left;">
</div>

<div class="calendar-content checkbox">
    <input type="checkbox" id="select_campaign" style="margin-left: 20px; margin-top: 28px; float: left;">
</div>

<div class="calendar-content checkbox">
    <input type="checkbox" id="select_campaign" style="margin-left: 20px; margin-top: 28px; float: left;">
</div>

当我单击每个复选框时，它不会更改每个 div 块的颜色。我不知道为什么它不允许我更改 div 块的颜色，所以我猜我的代码有问题。

jsfiddle：http: //jsfiddle.net/sx5p4j3k/

你能告诉我一个例子，当我点击每个复选框时，我如何使用 css 来更改 div 块的颜色？

谢谢你。

4

0 回答 0