如何用jquery更改按鈕的背景顏色onmouseover？

Question

我試圖改變提交按鈕的背景顏色，如果字段沒有填寫。

例如：如果我沒有填寫所有輸入和textareas然後onmousehover背景的提交按鈕應該變成紅色。但是如果所有的字段都填充了，那麼它應該改變爲綠色（onmousehover）。

我已經有填充輸入的代碼，所以我只需要功能，使顏色的變化：

 (function() { 
     $('form > input, form > textarea').keyup(function() { 

     var empty = false; 
     $('form > input, form > textarea').each(function() { 
      if ($(this).val() == '') { 
      empty = true; 
      } 
     }); 

     if (empty) { 
      $('#active').attr('disabled', 'disabled'); 

     } else { 
      $('#active').removeAttr('disabled'); 

     } 
     }); 
    })() 

我的HTML：

   <form method="post" action="send.php" > 
       <input name="name" type="text" class="topinp placeholdprop" style="float: left;" placeholder="Your cool name" /> 
       <input name="email" type="text" class="topinp placeholdprop" style="float: right;" placeholder="Your awesome email" /> 
       <input name="subject" type="text" class="subinp placeholdprop" placeholder="What do you need help with?" /> 
       <textarea name="comment" class="placeholdprop textareacntr" rows="7" type="text" placeholder="Type your message here" ></textarea> 
       <input id="active" type="submit" value="Submit" disabled="disabled" /> 
      </form> 

職能應if (empty)去後，我相信。請幫忙。

Answer 1

，可能是解決方案的有趣的部分：

$('#active').hover(function() { 
    $(this).css("background-color", empty?"red":"green") 
    }); 

其餘的可以在片段中找到：

(function() { 
 
     $('form > input, form > textarea').keyup(function() { 
 
     var valid = true; 
 
     $('form > input, form > textarea').each(function() { 
 
      if ($(this).val() == '') { 
 
      valid = false; 
 
      } 
 
     }); 
 
     $('#active').prop('disabled', !valid); 
 
     $('#active').toggleClass ('valid', valid); 
 
     }); 
 
    })()

#active:hover { 
 
    background-color: red; 
 
} 
 
#active.valid:hover { 
 
    background-color: green; 
 
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <form method="post" action="send.php" > 
 
     <input name="name" type="text" class="topinp placeholdprop" placeholder="Your cool name" /> 
 
     <input name="email" type="text" class="topinp placeholdprop" placeholder="Your awesome email" /> 
 
     <input name="subject" type="text" class="subinp placeholdprop" placeholder="What do you need help with?" /> 
 
     <textarea name="comment" class="placeholdprop textareacntr" rows="7" type="text" placeholder="Type your message here" ></textarea> 
 
     <input id="active" type="submit" value="Submit" disabled="disabled"/> 
 
    </form>

Answer 2

那麼在你的標題，你說你想改變一個div，但似乎你想改變按鈕的顏色。我不知道如何改變默認提交按鈕的顏色，除非你用jQuery UI來改變它。但讓我告訴你的代碼，將鼠標懸停在該DIV：

var original_color = ''; 
$('#divID').hover(function(){ 
    //hover code comes here 
    original_color = $(this).css('background-color'); 
    divColor = function you use to check wether or not fields are empty; 
    $(this).css('background-color', divColor); 
}, function(){ 
    //mouse leave code comes here 
    $(this).css('background-color', original_color); 
});