0

我正在尝试使用其中的复选框更改 div 的背景颜色。我做了这个供参考。我正在尝试<div>用 'highlight'替换父级<div>，所以我认为切换<div>会起作用。取消选中该复选框时，我希望背景颜色恢复正常（或删除 'highlight' <div>）。任何帮助表示赞赏。

4

2 回答 2

3

jsFiddle 中存在一些问题。

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

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

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

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

这是具有工作功能的 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; 
}

然后将 CSS 声明移到这些声明的.checked下方，使其优先于该background-color属性。

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

于 2013-01-17T15:38:47.467 回答
3

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

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

于 2013-01-17T15:38:35.637 回答