jquery 问题与 addClass() & toggleClass() & 默认 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

由于其优先级，在input上定义的background应用于标签。 focus是 class，而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}