Как добавить стиль в форму, когда кто-то нажимает на нее, и удалить этот стиль, когда кто-то щелкает

Question

По сути, у меня есть форма (id = "form") с background-color: #000000; border: 1px solid #fff; Я хочу изменить ее на background-color: #ffffff; border: 1px solid #000;, как только кто-то нажмет на нее.Я пытался использовать css: focusm, но, видимо, он не работает с формами.Так есть ли решение jQuery для этого?Также важно, чтобы после того, как пользователь щелкнул по форме (то есть, когда она не в фокусе), он должен вернуться к background-color: #000000; border: 1px solid #fff;

Answer 1

Я не верю, что элемент form может вызвать событие focus, поэтому вы можете установить цвет на основе событий blur и focus всех элементов в форме.

Markup:

<form id="myForm" method="post">
    <input type="text" />
    <input type="text" />
</form>

JQuery:

//receives focus
$("input, select").focus(function () {
    $("#myForm").css("background-color", "#fff");

    //OR
    //to swap a class with the CSS defined instead do this
    $("#myForm").addClass("your-class-name");
});

//loses focus
$("input, select").blur(function () {
    $("#myForm").css("background-color", "#000");

    //OR
    //to swap a class with the CSS defined instead do this
    $("#myForm").removeClass("your-class-name");
});

селектор input, select выберет все входы и выпадающие списки на странице. Вы можете дополнительно ограничить его, добавив префикс формы также, если это необходимо.

Answer 2

другой вариант: http://jsfiddle.net/6TrGg/

$(document).ready(function(){
    $(".form").mouseover(function(){
        $(".form").removeClass("form").addClass("form2");
        $(".form2").mouseout(function(){
            $(".form2").removeClass("form2").addClass("form");
        });  
    });
});