如何使用jQuery在鼠标悬停时更改按钮背景颜色？

Question

I'm trying to make change the background color of the submit button if the fields aren't filled in.

For example: If I didn't fill in all the inputs and textareas then onmousehover the background of the submit button should change to red. But if all of the fields are filled in, then it should change to the color green (onmousehover as well).

I already have the code for the filled inputs so I just need the function to make the color changes:

        (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');

        }
      });
    })()

My 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>

The functions should go after if (empty) I believe. Please help.

Answer 1

Well in your title you said you wanted to change a div, but seems like you want to change the color of the button. I am not sure how to change the color of a default submit button unless you change it with lets say Jquery UI. But let me show you the code for hover over for the 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);
});

Answer 2

that may be the interesting part of the solution:

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

the rest can be found in the snippet:

  (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>