javascript - 表格里背景变化

Question

我正在尝试实现当用户专注于输入时 li 标签改变背景颜色的效果（效果可以在页面底部看到here。从看到类似的问题看来，它似乎不能纯CSS，所以我想知道如何在 jquery 中做到这一点（我不知道）。这是我的 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

这是如何做到的。它将为具有焦点的表单字段的父 LI 添加背景颜色，退出字段后背景颜色将被移除。

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

您可以在 CSS 语句中使用 :hover 选择器；根本不需要JS..

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

Answer 3

这是一个基本的 jquery 版本，它在焦点上激活，例如示例

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

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

小提琴