Form li background change

Question

I'm trying to achieve the effect of the li tag changing background colors when the user focuses on the input (effect can be seen at the bottom of the page here . From seeing similar questions it seems like it can't be done in pure CSS, so I was wondering how to do it in jquery (I have no knowledge). Here is my HTML:

<form class="contact-form" action="" method="post" name="contact-form">  
        <ul>   
            <li>
                <input type="text" name="name" placeholder="NAME" class="test"/>
            </li>
            <li>
                <input type="email" name="email" placeholder="EMAIL" />
            </li>
            <li>
                <textarea name="message" name="message" placeholder="MESSAGE"></textarea>
            </li>
            <li>
                <button class="submit" type="submit">Send</button>
            </li>
        </ul>
    </form> 

Answer 1

Here's how to do it. It will add a background color to the parent LI of the form field that has focus, and after exiting the field the background color will be removed.

Working example on jsFiddle .

CSS:

.selected {
    background: lightYellow;
}

jQuery:

$(function () {
    var $form = $(".contact-form"),
        selectedClass = "selected";

    $form.on("focus", "input, textarea", function () {
        $(this).closest("li")
            .addClass(selectedClass);
    });

    $form.on("blur", "input, textarea", function () {
        $(this).closest("li")
            .removeClass(selectedClass);
    });
});

Answer 2

You can use the :hover selector in your CSS statement; no need for JS at all..

.contact-form ul li { background-color:#000000; }
.contact-form ul li:hover { background-color: #C0C0C0; }

Answer 3

Heres a basic jquery version which activates on focus like example

$('.contact-form').on('focus','input,textarea',function() {
    $('.contact-form li').animate({'backgroundColor':'#00FF00'});

    $(this).parent().animate({'backgroundColor':'#FF0000'});
});

fiddle