如何在某人点击某个表单时添加样式，并在有人点击时删除此样式

基本上我有一个表单（ID =“表单”）background-color: #000000; border: 1px solid #fff;我想将其更改为background-color: #ffffff; border: 1px solid #000;一旦有人点击它。我尝试使用CSS：focusm，但显然它不适用于窗体。那么是否有jQuery解决方案？此外，一旦用户从形式（所以当它没有焦点）点击了它应该返回到background-color: #000000; border: 1px solid #fff;如何在某人点击某个表单时添加样式，并在有人点击时删除此样式

来源

2011-12-30 Ilja

有你看着http://api.jquery.com/focus/ – 2011-12-30 14:58:31

$（ '＃形式'）专注（函数（）{//什么我。放在这里来定义新的CSS规则？}）;这是我到目前为止的想法，我对jQuery不太好，我该如何定义新的css？ – Ilja 2011-12-30 15:00:11

稍有不同：http://jsfiddle.net/A69Fm/ – 2011-12-30 15:12:28

我不相信form元素可以触发事件focus所以你可能是很重要的do是根据表单中所有元素的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前添加进一步限制它。

来源

2011-12-30 15:06:02 Craig

工作，一个问题，如果我想添加多个css规则将它看起来像这样？：$（“input，select”）。focus（function（） {（“＃myForm”）.css（“background-color”，“red”）; $（“＃myForm”）.css（“border”，“black”）; }）; – Ilja 2011-12-30 15:11:39

是的，你可以这样做，但我建议你创建一个CSS类并切换类。 – Craig 2011-12-30 15:14:57

@IlyaKnaup我已经更新了答案，以反映如何应用和删除一个用一行定义所有CSS样式的类。 – Craig 2011-12-30 15:19:49

另一种选择：http://jsfiddle.net/6TrGg/

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

来源

2011-12-30 15:25:42 mhps

+1另一个很好的解决方案。干杯 – Craig 2011-12-30 17:04:51

如何在某人点击某个表单时添加样式，并在有人点击时删除此样式

回答

相关问题