0

チェックボックスが入っているdivの背景色を変更しようとしています。参考までにこれを作成しました。<div>親を「ハイライト」に置き換えようとしている<div>ので、トグルが機能すると思いました<div>。チェックボックスの選択を解除したときに、背景色を通常に戻したい（または「ハイライト」を削除したい<div>）。どんな助けでも大歓迎です。

4

2 に答える 2

3

divのインラインbackground-colorスタイルを設定しています。これは、CSS ルールで設定したプロパティよりも優先されます。

次のように、css ファイルのクラスの値に追加!importantします。 http://jsfiddle.net/KtsGs/1/background-colorchecked

于 2013-01-17T15:38:35.637 に答える
3

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 の別の更新バージョンを次に示します。

于 2013-01-17T15:38:47.467 に答える