Question

基本上我有background-color: #000000; border: 1px solid #fff;表单（id =“表单”）我想在有人点击它时将其更改为background-color: #ffffff; border: 1px solid #000;。我尝试使用css：focusm，但显然它不适用于表单。那么有一个jQuery解决方案吗？同样重要的是，一旦用户点击表单（因此当它没有聚焦时），它应该返回background-color: #000000; border: 1px solid #fff;

Answer 1

我不相信form元素可以触发focus事件，因此您可以根据blur和focus事件设置颜色形式中的元素。

标记：

<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将选择页面中的所有输入和下拉菜单。如果需要，您可以通过在表单ID前加上来进一步限制它。

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");
        });  
    });
});

如何在某人点击它时为其添加样式，并在有人点击时删除此样式

2 个答案: