addClass（）＆toggleClass（）＆default CSS値

Question

のjqueryの問題次のコードでわかるように、背景は変更されずに境界が変更されます。 問題はデフォルトのバックグラウンド値です。 この問題を解決する方法

jqueryの：

$(document).ready(function() { 
    $('input').bind('focus blur', function() { 
     $(this).toggleClass('focus'); 
    }); 
}); 

CSS：

input{background-color: blue;} 
focus{background-color: red; border: 1px solid blue} 

HTML：

<input> 

Answer 1

inputに定義されたbackgroundは、その優先順位のタグに適用されます。 focusはクラス、inputはタグです。

てみ設定：

input{ 
    background-color: blue; 
} 
.focus{ 
    background-color: red; !important 
    border: 1px solid blue; 
} 

Answer 2

CSSが正しくありません。フォーカスのためにドットが欠けています。

input{background-color: blue;} 
.focus{background-color: red !important; border: 1px solid blue;} 

Answer 3

トライ書き込み：

代わり

background-color: red !important; 

：

background-color: red; 

また、あなたはjqueryのなしでこれを書くことができます。なぜあなたは次のように書きません：

input{background-color: blue;} 
input:focus{background-color: red; border: 1px solid blue}