表格li背景變更

Question

我試圖在用戶專注於輸入時實現li標記更改背景顏色的效果（效果可以在這里在頁面底部看到。從看到類似的問題來看，似乎不能單純地做到這一點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'});
});

小提琴