Question

我正在尝试使用复选框更改div的背景颜色。我已经this作为参考。我正在尝试使用“突出显示”<div>替换父<div>，因此我认为切换<div>会起作用。取消选中该复选框后，我希望背景颜色恢复正常（或删除'突出显示'<div>）。任何帮助表示赞赏。

Answer 1

您正在为div设置内联background-color样式。这优先于您通过CSS规则设置的任何属性。

将!important添加到css文件中background-color类的checked值，如下所示：http://jsfiddle.net/KtsGs/1/

Answer 2

jsFiddle中存在一些问题。

第一个是，尽管编写了jQuery代码，但您还没有选择jQuery作为左侧的框架。这是jsFiddle上特定代码的一个小问题，但很容易修复。

第二个问题是您在<div>元素上有内联样式，包括background-color。该内联样式将优先于使用CSS类指定的任何background-color（除非它被指定为!important），因此即使您的代码正确地将checked类添加到元素中，背景颜色不会改变。

最简单的解决方案是简单地更改CSS声明：

.checked {
    background-color: #ff0000 !important;
}

Here是jsFiddle的更新版本，具有工作功能（使用上面的建议）。

但是，我建议您将内联样式和JavaScript事件处理程序移动到它们自己的CSS声明中，这样您就不必指定!important。这需要进行以下更改：

#holder > div {
    clear: both;
    padding: 0.5%;
    margin-bottom: 1px;
    border-bottom: 1px solid #eee;
    float: left;
    width: 96%;
    style: height: 16px;
    cursor: pointer;
    background-color: white; // added this to the existing CSS
}

#holder > div:hover { // this is new
    background-color: #fafafa; 
}

然后将.checked的CSS声明移到这些声明之下，以便它优先于background-color属性。

Here是jsFiddle的另一个更新版本，改为使用CSS声明。

使用Jquery检查时通过复选框更改背景颜色

2 个答案: