チェックボックスが入っているdivの背景色を変更しようとしています。参考までにこれを作成しました。<div>
親を「ハイライト」に置き換えようとしている<div>
ので、トグルが機能すると思いました<div>
。チェックボックスの選択を解除したときに、背景色を通常に戻したい(または「ハイライト」を削除したい<div>
)。どんな助けでも大歓迎です。
2 に答える
divのインラインbackground-color
スタイルを設定しています。これは、CSS ルールで設定したプロパティよりも優先されます。
次のように、css ファイルのクラスの値に追加!important
します。 http://jsfiddle.net/KtsGs/1/background-color
checked
jsFiddle にはいくつかの問題があります。
1 つ目は、jQuery コードを作成したにもかかわらず、左側のフレームワークとして jQuery を選択していないことです。これは jsFiddle のコードに固有の小さな問題ですが、簡単に修正できます。
<div>
2 番目の問題は、要素にインライン スタイルがあることですbackground-color
。そのインライン スタイルはbackground-color
、CSS クラスを使用して指定されたものよりも優先して使用されるため (それが であると指定されている場合を除く!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
ます。
代わりに CSS 宣言を使用して、jsFiddle の別の更新バージョンを次に示します。