addClass（）＆amp;的jquery问题toggleClass（）＆amp;默认CSS值

Question

正如您在下面的代码中看到的那样，背景不会改变，但边框会发生变化。 问题在于默认背景值。 如何解决这个问题？！

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

background上定义的input因其优先级而应用于代码。 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}