如何在某人點擊某個表單時添加樣式，並在有人點擊時刪除此樣式

基本上我有一個表單（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

如何在某人點擊某個表單時添加樣式，並在有人點擊時刪除此樣式

回答

相關問題